So verwenden Sie rem+scss zur Anpassung auf dem Mobiltelefon

Dieses Mal zeige ich Ihnen, wie Sie rem+scss für die Anpassung auf dem Mobiltelefon verwenden. Was sind die Vorsichtsmaßnahmen für die rem+scss-Anpassung auf dem Mobiltelefon? Werfen wir einen Blick darauf.

rem-Einführung

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

Angenommen, die Schriftgröße des Stammelements beträgt 10 Pixel, dann beträgt die Größe von 5rem 5*10=50 Pixel, zum Beispiel

html{
    font-size: 10px;
}
p{
    width: 2rem; /* 2*10 = 20px;*/
    margin: 1rem;
}

rem zur Anpassung

In der Vergangenheit haben wir diese Seite so gemacht: 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. 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 hierbei ist, dass die Seite auf Geräten bestimmter Größen nicht gut angezeigt wird.

Wenn Sie rem zum Erstellen der Seite 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.

First js legt die Standardschriftgröße von HTML fest (geschrieben im HTML-Kopf)

<script type="text/javascript">
    var bodyElement = document.documentElement || document.body,
        RC = {
            w: 750,
            h: 1206
        }, //默认设计稿宽高
        GC = {
            w: document.documentElement.clientWidth || window.innerWidth || screen.width,
            h: document.documentElement.clientHeight || window.innerHeight || screen.height
        };
    function setFontSize(){
        var rightSize = parseFloat((RC.w / RC.h).toFixed(1)),
            currentSize = parseFloat((GC.w / GC.h).toFixed(1)),
            lastHTMLSize = 16, // 默认16是因为html默认字号是16px
            html = document.getElementsByTagName("html")[0];
        
            if(rightSize > currentSize){  // 长屏
                lastHTMLSize = 16;
            }else if(rightSize < currentSize){  //宽屏
                lastHTMLSize = (RC.h / GC.h * GC.w) / RC.w * 16;
            }
            html.style.fontSize = GC.w / lastHTMLSize + &#39;px&#39;;
        
    }
 
    setFontSize();
</script>

Legen Sie die SCSS-Datei fest px-Konvertierung rem

// 默认16是html默认字号
// 默认750是设计稿默认宽度
// $n是量取设计稿的距离
 
@charset "UTF-8";
@function rem($n) {
    @return $n / (750 / 16)+rem;
}

Bearbeiten Sie einfach aufzurufende Funktionen:

@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: absolute;
    left: 50%;
    top: rem($top);
    margin: 0 0 0 getLeft($left);
}
 
@mixin centerlt($left, $top) { //上下，左右居中
    position: absolute;
    left: 50%;
    top: 50%;
    margin: getTop($top) 0 0 getLeft($left);
}
@mixin centerrt($right, $top) { //上下，左右居中
    position: absolute;
    right: 50%;
    top: 50%;
    margin: getTop($top) getRight($right) 0 0;
}
@mixin middlert($right, $top) { //上下居中 右变
    position: absolute;
    right: rem($right);
    top: 50%;
    margin: getTop($top) 0 0 0;
}
 
@mixin centerb($left, $bottom) { //左右居中 下变
    position: absolute;
    left: 50%;
    bottom: rem($bottom);
    margin: 0 0 0 getLeft($left);
}
 
@mixin leftTop($left, $top) { //左变 上变
    position: absolute;
    left: rem($left);
    top: rem($top);
}
@mixin rightTop($right, $top) { //右变 上变
    position: absolute;
    right: rem($right);
    top: rem($top);
}
@mixin leftBottom($left, $bottom) { //右变 上变
    position: absolute;
    left: rem($left);
    bottom: rem($bottom);
}

Rufen Sie die obige Funktion auf (für den Breiten- und Höhenabstand, Verwenden Sie einfach ps, um den tatsächlichen Abstand zu messen. Die Standardentwurfsbreite beträgt 750):

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Inhalte finden Sie hier Artikel auf der chinesischen PHP-Website!

Verwandte Lektüre:

So erstellen Sie einen Kreisanimationseffekt in HTML5

So verwenden Sie H5s WebGL in demselben Die Schnittstelle erstellt JSON- und Echarts-Diagramme

So verwenden Sie die neuen semantischen Tag-Funktionen von H5

Das obige ist der detaillierte Inhalt vonSo verwenden Sie rem+scss zur Anpassung auf dem Mobiltelefon. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!