전화에 대한 미디어 쿼리가 작동하지만 타블렛이 아님

Question

내 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){ 
 
    \t .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: 1023px) 

사용이 미디어. iPad를 고려하면 뷰포트 너비는 세로 768 픽셀, 가로 1,024 픽셀이므로 태블릿을 1024 픽셀 이하로 간주해 봅시다. 또는 980 픽셀 및 가로 방향을 사용할 수도 있습니다

Answer 2

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

당신이 테스트로, 당신이 테스트하고있는 태블릿이 700 픽셀보다 큰 화면 폭을 가지고 추측거야?

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