Rems funktioniert nicht auf mobilen Geräten

Ich habe ein Problem mit Responsive Design auf mobilen Geräten, sehen Sie sich bitte den Code und die Bilder an. Der Unterschied zwischen diesen beiden ist die Schriftgröße des HTML-Wurzelelements, ich setze eins mit Prozent und das andere mit px, aber das mit Prozent funktioniert nicht richtig, während das mit px gut funktioniert. Und die Zahlen in den Bildern zeigen die Breite des roten Div. Gemäß dem ersten Teil meines CSS-Codes sollte die Breite des div im ersten Bild 320px betragen, aber es ist 450 und es wird sich nicht ändern, wenn ich die Schriftgröße nicht auf einen Prozentsatz größer als 52,1% oder etwas, I, einstelle erinnere mich nicht an die genaue Anzahl, warum ist das? Warum skalieren die Rems auf mobilen Geräten nicht richtig, wenn die Schriftgröße des Wurzelelements prozentual festgelegt wird? Bitte helfen Sie.Rems funktioniert nicht auf mobilen Geräten

HTML

<!DOCTYPE> 
<html> 
<head> 
    <title>test</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="main.css"> 
    <script src = "main.js"></script> 
<head> 
<body> 
    <div id="div">Hello</div> 
    <div id="info"></div> 
</body> 
</html>

Erste Css

*{margin:0;padding:0;} 
html{font-size:62.5%;} 
#div{ 
    width:50rem; 
    height:50rem; 
    margin:0 auto; 
    position:relative; 
    top:10rem; 
    font-size:5rem; 
    text-align:center; 
    line-height:50rem; 
    background:#ff0000; 
} 
#info{position:relative;top:10rem;font-size:5rem;} 

@media screen and (max-width:500px){ 
    html{font-size:40%;} 
    body{background:blue;} 
}

Zweite CSS

*{margin:0;padding:0;} 
html{font-size:62.5%;} 
#div{ 
    width:50rem; 
    height:50rem; 
    margin:0 auto; 
    position:relative; 
    top:10rem; 
    font-size:5rem; 
    text-align:center; 
    line-height:50rem; 
    background:#ff0000; 
} 
#info{position:relative;top:10rem;font-size:5rem;} 

@media screen and (max-width:500px){ 
    html{font-size:6px;} 
    body{background:blue;} 
}

Das Ergebnis auf meinem iPhone für den ersten Teil meines Codes

enter image description here

Das Ergebnis auf meinem iPhone für den zweiten Teil meines Codes

enter image description here

Quelle

2016-07-02 Anonymous

http://stackoverflow.com/questions/13941275/rem-in-css-in-what-way-it-differs-from-em – mplungjan

Vielen Dank für die Bearbeitung mplungjan! –

html{font-size:16px;} 
body{font-size:62.5%;}

Sie brauchen, um sich von 62,5%, was fragen? Die Standard-Browser-Schriftgröße ist HTML 16px soweit ich verstehe und "Die Rem-Einheit ist relativ zum Root-oder das HTML-Element."

https://snook.ca/archives/html_and_css/font-size-with-rem

In meinem responsive.scss ich einige Ratschläge habe ich es seit kurzem gefunden zu denken, sorry ich habe nicht den Link aber den Kommentar im Code ist erklärend:

@media only screen and (max-width:320px) 
{ 
    /* addresses a Mobile Webkit browsers - Safari & Chrome - issue with text downsizing in portrait mode */ 
    html.touch.webkit, 
    html.touch.webkit body 
    { 
     font-size:22px; 

     .button 
     { 
      font-size:12.8px; 
     } 
    }

Ich hoffe, das hilft.

Quelle

2016-07-02 10:04:49

Ja rem ist relativ zu der Wurzel, also im ersten Bild sollte die Breite 0,4 * 16 * 50 = 320px sein, aber die tatsächliche Breite ist 450px, und wie ich sagte, wenn ich die Schriftgröße der Wurzel auf einen Prozentsatz größer als festlegte 51% oder etwas, die Breite wird auf 450px festgelegt, was bedeutet, dass die Rems überhaupt nicht skaliert werden, während das Einstellen der Schriftgröße der Wurzel mit px gut funktioniert. Gehen Sie auf diese Seite [link] (http://zhoyyangbt.ca/test.html), testen Sie es auf Ihrem Handy, bitte sehen Sie, ob es richtig funktioniert. –

Vielen Dank für Ihre Antwort! Das ist also ein Bug von Mobile Webkit Browsern im Hochformat? –

Gern geschehen @Bright und ja, ich glaube es ist ein Bug. –

Rems funktioniert nicht auf mobilen Geräten

Antwort

Verwandte Themen