media query for phone works but not tablet

问题:

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>

回答1:

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

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

回答2:

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

I'm going to guess that, as you are testing, the tablet you're testing on has a screen width which is greater than 700px?

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