phone 的媒体查询有效但平板电脑无效

Question

我在我的 css 中使用媒体查询，我能够调整它以在我正在处理的页面上在移动设备上看起来不错，但平板电脑保持字体大小不变不要像我想要的那样调整。我怎样才能拥有一个同时针对平板电脑和 phone 进行调整的媒体查询？

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

Answer 1

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

我猜测，在您进行测试时，您所测试的平板电脑的屏幕宽度大于 700 像素？

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

Answer 2

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

使用这个媒体。考虑到 iPad，它的视口宽度在纵向模式下为 768px，在横向模式下为 1024px，因此让我们将平板电脑视为低于 1024px。或者您也可以使用 980px 和横向

phone 的媒体查询有效但平板电脑无效

media query for phone works but not tablet

html

css

media-queries

squarespace