媒体查询适用于手机,但不适用于平板电脑

Ben

我在CSS中使用媒体查询,并且能够对其进行调整以使其在我正在处理的页面上的移动设备上看起来不错,但是平板电脑使字体保持相同的大小,并且调整幅度不符合我的要求。如何获得一个可以同时针对平板电脑和手机进行调整的媒体查询?

<style>
 
  .kppr
  {
    margin-top: -8%;
    margin-left: 8%;
  }
  .kppr p
  {
    color: #89d4e8;
    font-size: 400%;
    font-weight: bold;
  }
  
  @media only screen and (max-width: 700px){
  	.kppr
    {
      margin-top: -15%;
    }
    
    .kppr p
    {
      font-size: 125%;
    }
    
    .kppr img
    {
      width: 4%;
      margin-left: 2%;
    }
  }
  
</style>
<div style="position: relative; top: 0; left: 0;" class="kppr">
  <p>
    kids play &nbsp&nbsp&nbsp&nbspparents relax
  </p>
  
  <img style="position: absolute; top: 49%; left: 35.5%;" class="heart"     src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/5759e5882b8ddea12fed577b/1465509256880/STL-Home-Heart.png" alt="Kids play, parents relax"/>
</div>

露西安
@media only screen and (max-width: 1023px)

使用此媒体。考虑到iPad,它的视口宽度在“纵向”中为768px,在“横向”中为1024px,所以让我们将平板电脑视为1024px以下。或者您也可以使用980px和横向

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章