Welche Layoutlösungen gibt es für mobile Endgeräte in HTML?

Kürzlich habe ich das Wap-Homepage-Layout von Taobao, Tmall und NetEase Lottery 163 studiert. Heute werde ich einige mobile Layoutpläne für Sie zusammenfassen und die Vor- und Nachteile der verwendeten Technologien analysieren.

Hinweis: Der Code wird mit dem Dateiprotokoll ausgeführt, das in Chrome nicht unterstützt wird und ein domänenübergreifender Fehler angezeigt wird. Sie können ihn mit Firefox oder Safari öffnen

wty2368

Forschung zum Layoutschema für mobile Endgeräte

Untersuchen Sie das WAP-Homepage-Layout von Taobao, Tmall und NetEase Lottery 163 und fassen Sie das Layoutschema für mobile Endgeräte zusammen
Hinweis: Der Code läuft unter dem Dateiprotokoll und unterstützt keine Verweise in Chrome. Lokale Dateien führen zu einem domänenübergreifenden Fehler. Sie können sie mit Firefox oder Safari öffnen.

Laden Sie das ppt herunter, das ich damals erstellt habe: Recherche zum mobilen Layout Plan im Dezember 2015

1. Grundlegende Konzepte

1. Physischer Pixel

Ein physischer Pixel ist die kleinste physische Anzeigeeinheit auf dem Display (mobil). Telefonbildschirm)

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

Geräteunabhängiges Pixel (auch dichteunabhängiges Pixel genannt) kann als Punkt im Computer betrachtet werden Koordinatensystem. Dieser Punkt stellt einen virtuellen Pixel dar, der vom Programm verwendet werden kann (zum Beispiel: CSS-Pixel)

3. Bitmap-Pixel

Ein Bitmap-Pixel ist die kleinste Dateneinheit eines Rasters Bild (z. B. PNG, JPG, GIF usw.). Jedes Bitmap-Pixel enthält einige seiner eigenen Anzeigeinformationen (z. B. Anzeigeposition, Farbwert, Transparenz usw.)

4. Gerätepixelverhältnis (bezeichnet als dpr)

Gerätepixelverhältnis = Physische Pixel / geräteunabhängige Pixel (in einer bestimmten Richtung, x-Richtung oder y-Richtung)

5. Skalierungsverhältnis:

6

scale = 1/dpr

2. NetEase-Lotterie-Designplan

<meta name="viewport" content="initial-scale=1,width=device-width,user-scalable=0,maximum-scale=1" />

NetEase-Lotterie

Maßstab übernehmen = 1,0 fest codiertes Ansichtsfenster

Übernehmen

Medienabfrage

Um den font-size-Wert des HTML-Stammelements zu bestimmen, dh den REM-Wert rem + prozentuales Layout

Der CSS-Code der Medienabfrage lautet wie folgt folgt:

3. Tmall-Designplan

//网易彩票的响应式布局是采用媒体查询来改变rem值实现的
//媒体查询css#media-query{
    @media screen and (min-width: 240px) {
        html,body,button,input,select,textarea {
            font-size:9px!important;
        }
    }
    @media screen and (min-width: 320px) {
        html,body,button,input,select,textarea {
            font-size:12px!important;
        }
    }
    @media screen and (min-width: 374px) {
        html,body,button,input,select,textarea {
            font-size:14px!important;
        }
    }
    @media screen and (min-width: 400px) {
        html,body,button,input,select,textarea {
            font-size:15px!important;
        }
    }
    // 省略
}

Tmall-Homepage

Übernehmen Sie Maßstab = 1,0 und codieren Sie das Ansichtsfenster fest

Verwenden Sie nicht rem, body Schriftgröße = 14 Pixel ist fest codiert

px + Flexbox-Layout

4. Es sind Probleme aufgetreten

1. 1px-Linienunschärfeproblem unter hochauflösendem Bildschirm (dpr>1)

Wenn Designer Manuskripte unterschiedlicher Größe erstellen, zeichnen sie in der Regel zuerst ein Manuskript in großer Größe (normalerweise 2x), verkleinern dann die Größe und exportieren es schließlich. Dies führt zu Problemen: Wenn der Designer im 2x-Manuskript eine 1-Pixel-Linie (z. B. Rand: 1 Pixel) zeichnet und wir sie im Maßstab = 1,0 darstellen möchten, wird sie zu 0,5 Pixel, was sehr groß ist. Einige Mobiltelefone können dies nicht Zeichnen Sie 0,5 Pixel.

Theoretisch entspricht 1 Bitmap-Pixel 1 physischen Pixel, sodass das Bild perfekt und klar dargestellt werden kann. Auf einem normalen Bildschirm gibt es kein Problem, aber auf einem Retina-Bildschirm (dpr=2) sind nicht genügend Pixel in der Bitmap vorhanden, was zu einem unscharfen Bild führt.

2. Das Unschärfeproblem von hochauflösenden Bildern unter hochauflösendem Bildschirm (dpr>1)

Für Retina-Bildschirme mit dpr=2 entspricht 1 Bitmap-Pixel 4 physischen Pixeln Ein einzelnes Bitmap-Pixel kann nicht weiter unterteilt werden, daher kann nur die nächstgelegene Farbe genommen werden, was zu einem unscharfen Bild führt (beachten Sie die oben genannten Farbwerte). Daher besteht eine bessere Lösung für das Problem hochauflösender Bilder darin, das doppelte Bild zu verwenden. Beispiel: 200×300 (CSS-Pixel)

img-Tag

, Sie müssen ein 400×600-Bild bereitstellen. Bei einem Retina-Bildschirm mit dpr=2 entspricht 1 Bitmap-Pixel 4 physischen Pixeln. Da ein einzelnes Bitmap-Pixel nicht weiter unterteilt werden kann, kann die Farbe nur vom nächstgelegenen Ort übernommen werden, was zu unscharfen Bildern führt (siehe oben). mehrere Farbwerte). Daher besteht eine bessere Lösung für das Problem hochauflösender Bilder darin, das doppelte Bild zu verwenden. Beispiel: 200×300 (CSS-Pixel) img-Tag, Sie müssen ein 400×600-Bild bereitstellen.
5. Die ultimative Lösung-->Taobao-Designplan

Taobao-Homepage

Erhalten Sie die DPR-Parameter des Mobiltelefons durch JS-Verarbeitung und generieren Sie dann dynamisch den Standpunkt

Ermitteln Sie die physische Pixelbreite des Mobiltelefons und teilen Sie sie in 10 Teile. Die Breite jedes Teils entspricht der Größe von rem.

Je nach Größe des Designentwurfs (px) wird er in drei Situationen verarbeitet, wobei px + rem-Layout verwendet wird

Das relevante Skript lautet wie folgt:

6. Zusammenfassung des Designplans

$(document).ready(function(){
    var dpr, rem, scale;
    var docEl = document.documentElement;
    var fontEl = document.createElement('style');
    var metaEl = document.querySelector('meta[name="viewport"]');
    var view1 = document.querySelector('#view-1');
    if(window.screen.width < 540){
        dpr = window.devicePixelRatio || 1;
        scale = 1 / dpr;
        rem = docEl.clientWidth * dpr / 10;
    }else{
        dpr = 1;
        scale =1;
        rem = 54;
    }//貌似最新的淘宝网站又去掉了，只是限制了主体内容的宽度
    // 设置viewport，进行缩放，达到高清效果
    metaEl.setAttribute(&#39;content&#39;, &#39;width=&#39; + dpr * docEl.clientWidth + &#39;,initial-scale=&#39; + scale + &#39;,maximum-scale=&#39; + scale + &#39;, minimum-scale=&#39; + scale + &#39;,user-scalable=no&#39;);
    // 设置整体div的宽高
    view1.setAttribute(&#39;style&#39;, &#39;width:&#39;+ docEl.clientWidth+&#39;px; height:&#39;+ docEl.clientHeight+&#39;px&#39;);
    // 设置data-dpr属性，留作的css hack之用
    docEl.setAttribute(&#39;data-dpr&#39;, dpr);
    // 动态写入样式
    docEl.firstElementChild.appendChild(fontEl);
    fontEl.innerHTML = &#39;html{font-size:&#39; + rem + &#39;px!important;}&#39;;
    $(&#39;body&#39;).attr(&#39;style&#39;, &#39;font-size:&#39; + dpr * 12 +&#39;px&#39;);
    // 给js调用的，某一dpr下rem和px之间的转换函数
    window.rem2px = function(v) {
        v = parseFloat(v);
        return v * rem;
    };
    window.px2rem = function(v) {
        v = parseFloat(v);
        return v / rem;
    };
    window.dpr = dpr;
    window.rem = rem;})

Aus der obigen Analyse ist nicht schwer zu erkennen, dass:

Die Lösung von NetEase Lottery ist schnell einsatzbereit, weist eine hohe Entwicklungseffizienz und gute Kompatibilität auf. aber es ist nicht flexibel und anspruchsvoll genug; Cats Designidee ist relativ einfach und Flexbox ist sehr flexibel, aber die Kompatibilität von Flexbox muss sorgfältig gehandhabt werden und ist nicht präzise genug.

Taobaos Lösung löst fast alle Probleme Probleme, die auf der mobilen Seite auftreten, sind eine perfekte Lösung, aber die Entwicklungseffizienz ist gering und die Kosten relativ hoch.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Welche Techniken gibt es für die Verwendung von Bildlaufleisten in HTML?

HTML springt in zwei Sekunden zu anderen Seiten

So verwenden Sie die Trigger-Methode, um das Dialogfeld zur Dateiauswahl aufzurufen, ohne auf die Dateitypeingabe zu klicken

Anleitung Legen Sie das versteckte Andere in einem Tag fest. Das Attribut zeigt nur Bilder an

Das obige ist der detaillierte Inhalt vonWelche Layoutlösungen gibt es für mobile Endgeräte in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!