Quelles sont les solutions de mise en page pour terminaux mobiles en HTML ?

Récemment, j'ai étudié la mise en page de style de page d'accueil wap de Taobao, Tmall et NetEase Lottery 163. Aujourd'hui, je vais résumer pour vous quelques plans de mise en page mobile et analyser les avantages et les inconvénients des technologies utilisées.

Remarque : le code s'exécute en utilisant le protocole de fichier. La référence aux fichiers locaux n'est pas prise en charge dans Chrome et une erreur inter-domaine sera demandée. Vous pouvez l'ouvrir avec Firefox ou Safari

<.>wty2368

Recherche sur le schéma de mise en page du terminal mobile

Étudiez la mise en page du style de page d'accueil WAP de Taobao, Tmall et NetEase Lottery 163 et résumez le schéma de mise en page du terminal mobile

Remarque : le code fonctionne sous le protocole de fichier et ne prend pas en charge les références dans Chrome. Les fichiers locaux provoqueront une erreur inter-domaines. Vous pouvez les ouvrir avec Firefox ou Safari

Téléchargez le ppt que j'ai fait à ce moment-là : Recherche sur la mise en page mobile. plan en décembre 2015

1.

Concepts de base

1. Pixel physique

Un pixel physique est la plus petite unité d'affichage physique sur l'écran (mobile). écran du téléphone)

2. Pixel indépendant de l'appareil (densité) - pixel indépendant)

Le pixel indépendant de l'appareil (également appelé pixel indépendant de la densité) peut être considéré comme un point dans l'ordinateur. système de coordonnées. Ce point représente un pixel virtuel pouvant être utilisé par le programme (par exemple : pixel CSS)

3 Pixel bitmap

Un pixel bitmap est la plus petite unité de données d'un raster. image (telle que png, jpg, gif, etc.). Chaque pixel bitmap contient certaines de ses propres informations d'affichage (telles que la position d'affichage, la valeur de couleur, la transparence, etc.)

4. Rapport de pixels de l'appareil (appelé dpr)

Rapport de pixels de l'appareil. = Pixels physiques / pixels indépendants de l'appareil (dans une certaine direction, direction x ou direction y)

5. Échelle

Rapport d'échelle :

scale = 1/dpr

6.

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

2. Plan de conception de la loterie NetEase

Loterie NetEase

Adopter l'échelle = 1.0 fenêtre codée en dur

Adopter

Requête multimédia Pour déterminer la valeur font-size de l'élément racine html, c'est-à-dire la valeur rem

rem + disposition en pourcentage

Le code CSS de la requête multimédia est le suivant suit :

//网易彩票的响应式布局是采用媒体查询来改变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;
        }
    }
    // 省略
}

3. Plan de conception de Tmall

Page d'accueil de Tmall

Adopter scale = 1.0 et coder en dur la fenêtre

Ne pas utiliser rem, et la taille de la police = 14 px du corps est codée en dur

disposition px + flexbox

4. Problèmes rencontrés

1. Problème de flou de ligne 1 px sous écran haute définition (dpr>1. )

Le plus souvent, lorsque les concepteurs produisent des manuscrits de différentes tailles, ils dessinent d'abord un manuscrit de grande taille (généralement 2x), puis réduisent la taille et enfin l'exportent. Cela posera des problèmes : si le concepteur dessine une ligne de 1 px (par exemple, bordure : 1 px) dans le manuscrit 2x, si nous voulons la présenter à l'échelle=1,0, elle deviendra 0,5 px, ce qui est très grand. Certains téléphones portables ne le peuvent pas. dessinez 0,5px.

Théoriquement, 1 pixel bitmap correspond à 1 pixel physique, afin que l'image puisse être affichée parfaitement et clairement. Il n'y a pas de problème sur un écran normal, mais sur un écran Retina (dpr=2) il n'y aura pas assez de pixels dans le bitmap, ce qui donnera une image floue.

2. Le problème de flou des images haute définition sous écran haute définition (dpr>1)

Pour un écran rétine avec dpr=2, 1 pixel bitmap correspond à 4 pixels physiques. un seul pixel Bitmap ne peut pas être divisé davantage, donc la couleur la plus proche ne peut être prise, ce qui entraîne une image floue (notez les valeurs de couleur ci-dessus). Par conséquent, pour le problème des images haute définition, une meilleure solution consiste à utiliser deux fois l’image. Par exemple : 200×300 (pixel css)

balise img , vous devez fournir une image 400×600. Pour un écran Retina avec dpr=2, 1 pixel bitmap correspond à 4 pixels physiques. Puisqu'un seul pixel bitmap ne peut pas être divisé davantage, la couleur ne peut être prise qu'à partir de l'emplacement le plus proche, ce qui entraîne des images floues (notez ce qui précède. plusieurs valeurs de couleur). Par conséquent, pour le problème des images haute définition, une meilleure solution consiste à utiliser deux fois l’image. Par exemple : balise img 200×300 (pixel css), vous devez fournir une image 400×600.

5. La solution ultime-->Plan de conception Taobao

Page d'accueil Taobao

Obtenez les paramètres dpr du téléphone mobile via le traitement js, puis générez dynamiquement le point de vue

Obtenez la largeur physique des pixels du téléphone mobile et divisez-la en 10 parties. La largeur de chaque partie est la taille de rem.

Selon la taille du brouillon de conception (px), il sera traité dans trois situations, en utilisant la disposition px + rem

Le script pertinent est le suivant :

$(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;})

6. Résumé du plan de conception

D'après l'analyse ci-dessus, il n'est pas difficile de voir que :

La solution de NetEase Lottery est rapide à démarrer, a une efficacité de développement élevée et une bonne compatibilité, mais ce n'est pas assez flexible et sophistiqué ;

L'idée de conception de Cat est relativement simple, et flexbox est très flexible, mais la compatibilité de flexbox doit être gérée avec soin et n'est pas assez précise

La solution de Taobao résout presque tous les problèmes rencontrés du côté mobile, et c'est une solution parfaite, mais l'efficacité du développement est faible et le coût est relativement élevé.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Quelles sont les techniques d'utilisation des barres de défilement en HTML

Le HTML permet de passer à d'autres pages en deux secondes

Comment utiliser la méthode de déclenchement pour faire apparaître la boîte de dialogue de sélection de fichier sans cliquer sur l'entrée du type de fichier

Comment définir l'autre caché dans une balise L'attribut affiche uniquement les images

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!