Ausführliche Erklärung der Verwendung von rem+scss zur Anpassung auf dem Mobiltelefon

rem (Schriftgröße des Stammelements) bezieht sich auf die Einheit der Schriftgröße relativ zum Stammelement (d. h. HTML-Element).

Unter der Annahme, dass die Schriftgröße des Stammelements 10 Pixel beträgt, beträgt die Größe von 5rem beispielsweise 5 * 10 = 50 Pixel

 html{ Schriftgröße: 10px;}p{ Breite: 2rem; /* 2*10 = 20px;*/ margin: 1rem;}

In der Vergangenheit haben wir diese Seite häufig verwendet: Stellen Sie die Breite des Ansichtsfensters auf Gerätebreite ein und wählen Sie dann die Mindestbreite des Geräts aus, mit dem wir kompatibel sein müssen (normalerweise 320 Pixel). Erstellen Sie Seiten basierend auf dieser Mindestbreite. Die Einheiten verwenden px und Prozentsatz. Auf Geräten mit unterschiedlichen Breiten sind die Schriftgröße und die Inhaltsgröße der Seite gleich. Der Unterschied besteht darin, dass der Abstand zwischen den Inhalten auf dem großen Bildschirm größer ist als auf dem kleinen Bildschirm. Der Nachteil besteht darin, dass die Seite auf Geräten bestimmter Größen nicht gut angezeigt wird.

Wenn wir zum Erstellen der Seite rem verwenden, legen wir je nach Gerätebreite unterschiedliche Schriftgrößen für das Stammelement fest. Je größer die Breite, desto größer die Schriftgröße. Verwenden Sie dann rem, um das ursprüngliche Pixel zu ersetzen. Auf diese Weise werden Schriftgröße, Inhaltsgröße und das Paar größer, wenn die Bildschirmbreite größer wird.

Erstens legt js die Standardschriftgröße von HTML fest (im Kopf von HTML geschrieben).

 <script type=text/javascript> var bodyElement = document.documentElement ||. document.body, RC = { w: 750, h: 1206 }, //Standardbreite und -höhe des Designentwurfs GC = { w: document.documentElement.clientWidth |. |. window.innerWidth ||. screen.width, h: document.documentElement.clientHeight || screen.height }; function setFontSize(){ var rightSize = parseFloat((RC.w / RC.h).toFixed(1)), currentSize = parseFloat((GC.w / GC.h).toFixed(1)) , lastHTMLSize = 16, // Der Standardwert 16 liegt daran, dass die Standardschriftgröße von HTML 16 Pixel beträgt. html = document.getElementsByTagName(html)[0]; if(rightSize > currentSize){ // Langer Bildschirm lastHTMLSize = 16; }else if(rightSize < currentSize){ // Breitbild lastHTMLSize = (RC.h / GC.h * GC . w) / RC.w * 16; } html.style.fontSize = GC.w / lastHTMLSize + 'px'; } setFontSize();</script>

SCSS-Datei px auf rem setzen

 // Der Standardwert 16 ist die Standardschriftgröße von HTML // Der Standardwert 750 ist die Standardbreite des Designentwurfs // $n ist der vom Designentwurf gemessene Abstand @charset UTF-8; { @return $n / (750 / 16)+rem;}

Bearbeitungsfunktionen für einfaches Aufrufen:

 @function getTop($n) { @return ($n - 1206 / 2) / (750 / 16)+rem;} @function getLeft($n) { @return ($n - 750 / 2) / (750 / 16)+rem;}@function getRight($n) { @return (($n - 750) / 2) / (750 / 16)+rem;}@mixin center($left, $top) { //Position ändern: left: 50%; top: rem($top) ;}@ mixin centerlt($left, $top) { //Nach oben und unten, linke und rechte Mittelposition: absolut links: 50%; Rand: getTop($top) 0 0 getLeft($left);}@mixin centerrt($right, $top) { //Nach oben und unten, linke und rechte Mittelposition: rechts: 50 %; Rand: getTop($top) getRight ($right) 0 0;}@mixin middlert($right, $top) { //Ändern nach oben, unten, in der Mitte, rechts Position: absolut; rem($right: 50%; $top) 0 0 0;}@mixin centerb($left, $bottom) { //Position ändern: absolute left: 50%; margin: 0 0 0 getLeft($left); leftTop($left, $top) { //Von links nach oben ändern: absolute; left: rem($left); top: rem($top);}@mixin rightTop($right, $top) { //Nach rechts ändern zur Position: absolute; right: rem($right); top: rem($top);}@mixin leftBottom($left, $bottom) { //Nach rechts ändern zur Position: absolute; links: rem($left); unten: rem($bottom);}

Rufen Sie die obige Funktion auf (der Breiten- und Höhenabstand kann in ps gemessen werden, um den tatsächlichen Abstand zu messen. Die Standardbreite des Entwurfsentwurfs beträgt 750):

 .page1-img1{ width: rem(473); height: rem(173); @include centerlt(139, 767);}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.