媒体查询适用于手机，但不适用于平板电脑 [英] media query for phone works but not tablet

问题描述

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

I am using media query in my css and I was able to adjust it to look good on mobile on the page I'm working on, but the tablet keeps the font the same size and doesn't adjust like I want. How can I have one single media query that adjusts both for tablet AND 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>

推荐答案

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

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

use this media. considering iPad, it's viewport width is 768px in Portrait and 1024px in Landscape, so let's consider tablet as below 1024px. or you can also use 980px and landscape orientation

这篇关于媒体查询适用于手机，但不适用于平板电脑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！