Anpassung des Rem-Layoutprinzips bei der Entwicklung mobiler Seiten

Grundsätze der REM-Layout-Anpassung für die Entwicklung mobiler Seiten

Was ist Anpassung und warum sollte sie angepasst werden?

Die Designzeichnungen, die wir erhalten, liegen im Allgemeinen in den Auflösungen 640, 750, 1080 vor Basierend auf dem Design gibt es mittlerweile verschiedene mobile Endgeräte mit unterschiedlichen Auflösungen, unterschiedlichen logischen Pixeln und unterschiedlichen Ansichtsfenstern. Damit unsere Seiten auf jedem Gerät gut angezeigt werden, müssen wir etwas für diese Geräte tun Dieser Vorgang wird als Anpassung mobiler Endgeräte bezeichnet.

Einige Konzepte, die Sie kennen müssen:

Physischer Pixel (physischer Pixel)

Ein physischer Pixel ist die kleinste physische Anzeigeeinheit auf dem Display (Mobiltelefonbildschirm), die kann als unsere übliche Auflösung verstanden werden.

Geräteunabhängiges Pixel (dichteunabhängiges Pixel)

Geräteunabhängiges Pixel (auch dichteunabhängiges Pixel genannt) kann als Punkt im Computerkoordinatensystem betrachtet werden Ein Punkt, der vom Programm gesteuert werden kann (z. B. CSS-Pixel), der dann vom entsprechenden System in physische Pixel umgewandelt wird, was als die Größe des visuellen Ansichtsfensters verstanden werden kann >

Also, der Unterschied zwischen physischen Pixeln und geräteunabhängigen Pixeln Es gibt eine gewisse Entsprechung zwischen ihnen, nämlich das Gerätepixelverhältnis, über das wir als nächstes sprechen werden.

Gerätepixelverhältnis (Gerätepixelverhältnis)

Gerätepixelverhältnis (kurz dpr) definiert die Entsprechung zwischen physischen Pixeln und geräteunabhängigen Pixeln. Sein Wert kann gemäß der folgenden Formel ermittelt werden: Gerätepixelverhältnis = physisches Pixel / geräteunabhängiges Pixel // In einer bestimmten Richtung, x-Richtung oder y-Richtung

Das Gerätepixelverhältnis wird auch beim Erstellen des Geräts festgelegt und kann über Fenster abgerufen werden .devicePixelRatio zum DPR des aktuellen Geräts.

Ansichtsfenster

PC-Ansichtsfenster bezieht sich auf den Inhaltsbereich innerhalb des Browserfensters, mit Ausnahme von Symbolleisten und Bildlaufleisten

Ansichtsfenster in mobilen Browsern Für verschiedene Situationen:

Das durch den Inhalt festgelegte Ansichtsfenster wird als Layout-Ansichtsfenster bezeichnet Die Breite des Browserfensters kann durch document.documentElement.clientWidth ermittelt werden. Die Größe des angezeigten Browserfensters und des Webseitenbereichs wird durch CSS-Pixel (logische Gerätepixel) dargestellt.

rem

rem ist eine Längeneinheit von CSS3, relativ zum Dokument und zum Element html; dann kann 1rem=100px verwendet werden dieser Basiswert zum Festlegen der Größe;

Häufig verwendete Lösungen:

Feste Höhe, adaptive Breite (Prozentsatz, em)

Rem-Layout verwenden

Die Im Folgenden wird die Lösung von NetEase für die Verwendung von rem auf der Homepage von Taobao zusammengefasst.

Ansatz von NetEase:

1) Passen Sie das Layout ohne Skalierung an das visuelle Ansichtsfenster an, d. h. an das ideale Ansichtsfenster.

2) Basierend auf der Auflösung des Designentwurfs und unter Verwendung von 100 Pixel als Referenz für die Schriftgröße kann dann, wenn die Breite des Designentwurfs 640 beträgt, die Breite des Körperelements festgelegt werden zu Breite: 6,4rem (640/100), wenn wir das Layout-Ansichtsfenster auf 320 setzen, dann beträgt die Schriftgröße html=deviceWidth / 6,4.

<meta name="viewport"content="initial-scale=1,maximum-scale=1, minimum-scale=1”>

3) DeviceWidth über document.documentElement.clientWidth abrufen

4) HTML-Schriftgröße festlegen, wenn der Dom der Seite fertig ist,

5) Durch mediaQuery Legen Sie die Schriftgröße fest. Sie können rem nicht für die Schriftgröße verwenden, da der Fehler zu groß ist.

document.documentElement.style.fontSize =document.documentElement.clientWidth / 6.4 + ‘px’

Am Beispiel des 640-Designentwurfs lautet der endgültige Code für die Einstellung der HTML-Schriftgröße wie folgt. Teilen Sie beim Layout die im Designentwurf markierte Größe durch 100, was dem Wert von rem entspricht ist ganz einfach

Hier if(deviceWidth > 640) deviceWidth = 640; liegt daran, dass wenn deviceWidth größer als 640 ist, die physische Auflösung bereits größer als 1280 ist (abhängig von dpr), sollten Sie besuchen die PC-Website;

淘宝的做法：

原理

1) 通过dpr设置缩放比，实现布局视口大小，

var scale = 1 / devicePixelRatio;  
 document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale='+ scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

2) 动态计算html的font-size

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + ‘px’；

这里的意思是，clientWidth / 10 得到是布局视口下的rem基准值（以iphone6为例 1rem＝75px），那么设计稿正好也是 750，所以对应的关系 clientWidth / 10＝＝设计稿的尺寸/x, 那么x=设计稿的尺寸/rem基准值。如果是iphone6 plus rem基准值等于clientWidth / 10 等于124.2，那么x＝750/124.2。

关于具体的实现 淘宝提供了一个开源的方案lib-flexible：https://github.com/amfe/lib-flexible

具体逻辑 ：

1）判断head中是否设置了viewport，如果有设置，按照已有viewport 设置缩放比；

if (metaEl) {
        console.warn('将根据已有的meta标签来设置缩放比例');
        var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
        if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale);
        }
    }

2）如果没有设置meta viewport，判断是否设置dpr，如果有，通过dpr计算缩放scale。

        var content = flexibleEl.getAttribute('content');
        if (content) {
            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);//maximum 设置最大值，与initial的值比较，取最小值；
            if (initialDpr) {
                dpr = parseFloat(initialDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));    
            }
            if (maximumDpr) {
                dpr = parseFloat(maximumDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));    
            }
        }

3）如果 dpr &scale都没有设置，那么就通过设备的dpr设置起缩放 scale，

if (!dpr && !scale) {//meta[name="viewport"]&&meta[name="flexible"]都不存在。
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
        // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        // 其他设备下，仍旧使用1倍的方案
        dpr = 1;
    }
    scale = 1 / dpr;
}

4）得到scale之后 ，如果meta 的viewport不存在，那么就创建一meta[name=“viewport”],将scale配置进去。

    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

    if (docEl.firstElementChild) {

        docEl.firstElementChild.appendChild(metaEl);
         
    }

5）动态改写html的font-size

    var width = docEl.getBoundingClientRect().width;//获取html的宽度
    if (width / dpr > 540) {//判断屏幕逻辑像素大于540时，取540
        width = 540 * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;

总结：

使用rem布局，实质都是通过动态改写html的font-size基准值，来实现不同设备下的良好统一适配；

网易与淘宝不同 的地方是 ，网易将布局视口设置成了 视觉视口，淘宝将布局视口设置成了物理像素大小，通过 scale缩放嵌入了 视觉视口中；

容器元素的字体大小都不使用rem，需要额外的media查询；