Question

我在我的CSS中使用媒体查询，我能够在我正在处理的页面上调整它以便在移动设备上看起来很好，但平板电脑保持字体尺寸相同且无法调整我想要的。如何才能为平板电脑和手机调整一个媒体查询？

＆＃13;

<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>

＆＃13;

<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>

＆＃13;

Answer 1

@media only screen and (max-width: 700px)

我猜你正在测试，你正在测试的平板电脑的屏幕宽度大于700px？

See these tips on breakpoints in a previously asked/answered question

Answer 2

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

使用此媒体。考虑到iPad，它的视口宽度在纵向中为768像素，在横向上为1024像素，因此我们将平板电脑视为低于1024像素。或者你也可以使用980px和横向

媒体查询手机有效，但不是平板电脑

2 个答案: