Media-Abfrage für Telefon funktioniert, aber nicht Tablet

Question

Ich benutze Medienabfrage in meinem CSS und ich konnte es auf Mobile auf der Seite, an der ich arbeite, gut aussehen, aber das Tablet behält die Schriftart die gleiche Größe und passt sich nicht an wie ich will. Wie kann ich eine einzige Medienabfrage haben, die sich sowohl für Tablet als auch für Telefon anpasst?

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

Verwendung dieser Medien. Wenn man das iPad betrachtet, beträgt die Breite des Darstellungsbereichs 768 Pixel im Hochformat und 1024 Pixel im Querformat. Betrachten wir das Tablet als unter 1024 Pixel. oder Sie können auch 980px und Querformat verwenden

Answer 2

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

Ich werde erraten, dass, wie Sie testen, die Tablette Sie testen auf eine Bildschirmbreite hat, die als 700px größer ist?

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