Implementierung von dynamischem REM für mobiles Layout

Dynamische REM

1. Lassen Sie uns zunächst die aktuellen Längeneinheiten einführen

px

em die Breite eines M / die Breite eines chinesischen Schriftzeichens 1em == seine eigene font-size

rem steht für root em also font-size des Root-Elements (html)

vh steht für viewport height 100vh == Ansichtsfensterhöhe

vw volle viewport width 100vw == Ansichtsfensterbreite

Da die Standardschriftgröße der Webseite 16px beträgt, entspricht 1rem standardmäßig 16px. Die standardmäßige Mindestschriftgröße von chrome beträgt 12px.

Wenn keine Schriftgröße festgelegt ist, erbt ein Element die Schriftgröße seines übergeordneten Elements.

2. Mobiles Layout

Es gibt grundsätzlich zwei Typen von Layouts für mobile Endgeräte:

• Erstens die Gesamtskalierung
• Das zweite ist das Prozentlayout

Lassen Sie uns zunächst über die allgemeine Skalierung sprechen

Bei der Gesamtskalierung geht es eigentlich darum, die Webseite auf dem PC auf eine Größe zu verkleinern, die es ermöglicht, die gesamte Seite auf dem mobilen Bildschirm anzuzeigen.

Dieses Layout wurde verwendet, als das iPhone zum ersten Mal auf den Markt kam. Apple stellte fest, dass die meisten Webseiten der Welt 980 Pixel breit sind, während die Breite von iPhones 320 Pixel beträgt. Daher verwendet der Browser des iPhone eine Bildschirmbreite von 320 Pixel, um eine Breite von 980 Pixel zu simulieren und so einen Gesamtzoom zu erreichen.

Um den Effekt zu sehen, löschen Sie den Teil <meta name="viewport"> .

 <Stil>
        div{
            Breite: 980px;
            Rand: 0 automatisch;
            Hintergrund: #f0f0f0;
        }
        ul{
            Listenstil: keiner;
        }
        li{
            schweben: links;
            Rand links: 10px;    
        }
        klarfix::nach{
            Inhalt:"";
            Anzeige:Block;
            klar: beides;
        }
    </Stil>
</Kopf>
<Text>
    <div>
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 4</li>
            <li>Option 5</li>
            <li>Option 6</li>
        </ul>
    </div>
</body> 

Aber dieses allgemeine Skalierungserlebnis ist nicht gut, also sprechen wir über das prozentuale Layout.

Prozentuales Layout

//Prozentuales Layout <Stil>
        .Kind{
            Hintergrundfarbe:#ccc;
            Textausrichtung: zentriert;
            Breite: 40 %;
            Rand: 10px 5 %;
            schweben: links;
        }
        .clearfix::nach{
            Inhalt:"";
            Anzeige:Block;
            klar: beides;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="übergeordnetes Clearfix">
        <div class="child">Option 1</div>
        <div class="child">Option 2</div>
        <div class="child">Option 3</div>
        <div class="child">Option 4</div>
    </div>
</body> 

Sie sehen, dass sich die Prozentdarstellung automatisch an die Bildschirmbreite anpasst.

Allerdings hat die Prozentangabe den Nachteil, dass Breite und Höhe nicht miteinander verknüpft werden können.

Wie Sie im obigen GIF sehen können, wird die Breite immer größer, die Höhe ändert sich jedoch nicht.

Um die Höhe des Optionsfelds auf die Hälfte seiner Breite zu bringen, müssen wir die Breite des Bildschirms kennen, um die Breite und Höhe der Option zu bestimmen.

vw kann hier verwendet werden, aber vw ist schlecht kompatibel. Wir können rem anstelle von vw verwenden

Zunächst einmal basiert rem auf der Schriftgröße von HTML, daher können wir HTML-Schriftgröße == Seitenbreite machen

<Skript>
	let pageWidth = window.innerWidth;
    Dokument.schreiben('<style>html{Schriftgröße:'+ Seitenbreite/10 +'px}</style>')
</Skript>

Um Rem besser zu nutzen, entspricht 1 Rem hier 1/10 der Bildschirmbreite. Beachten Sie, dass 1rem == 1 % des Bildschirms nicht erreicht werden kann. Weil die font-size是12px ;

Ändern Sie den Code wie oben

<Stil>
.Kind{
            Hintergrundfarbe:#ccc;
            Textausrichtung: zentriert;
            Breite: 4rem;
            Höhe: 2rem;
            Rand: 10px 0,05rem;
            schweben: links;
            Zeilenhöhe: 2rem;
        }
        .clearfix::nach{
            Inhalt:"";
            Anzeige:Block;
            klar: beides;

        }
</Stil>
</Kopf>
<Text>
    <div Klasse="übergeordnetes Clearfix">
        <div class="child">Option 1</div>
        <div class="child">Option 2</div>
        <div class="child">Option 3</div>
        <div class="child">Option 4</div>
    </div>
</body>

Wirkung ins Bild

Wir können sehen, dass sowohl die Breite als auch die Höhe prozentual geändert werden können, aber wir werden auf etwas sehr Problematisches stoßen. Im Designentwurf, den uns der Designer gegeben hat, müssen wir die Pixeleinheit jedes Elements in Rem umrechnen. Hier brauchen wir scss um px zu konvertieren

3.scss dynamische Konvertierung px

@function pxToRem($px){
    @return $px/$designWidth*10+rem; //10 bedeutet, den gesamten Bildschirm in 10rem aufzuteilen
}
$designWidth:320; //Designbreite.child{
    Hintergrundfarbe:#ccc;
    Textausrichtung: zentriert;
    Breite:pxToRem(128);//4rem;
    Höhe:pxToRem(64);//2rem;
    Rand: 10px pxToRem(1,6);
    schweben: links;
    Zeilenhöhe:pxToRem(64);
}
.clearfix::nach{
    Inhalt:"";
    Anzeige:Block;
    klar: beides;

}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.