What are the layout solutions for mobile terminals in HTML?

Recently, I have studied the wap homepage style layout of Taobao, Tmall and NetEase Lottery 163. Today I will summarize some mobile layout plans for you and analyze the pros and cons of the technologies used.

Note: The code runs using the file protocol. Reference to local files is not supported in Chrome, and a cross-domain error will be prompted. You can open it with Firefox or Safari

wty2368

Mobile Layout Plan Research

Study the WAP homepage style layout of Taobao, Tmall and NetEase Lottery 163, and summarize the mobile layout plan
Note: The code runs under the file protocol and does not support references in Chrome Local files will prompt a cross-domain error. You can use Firefox or Safari to open them.

Download the ppt made at that time: Research on mobile layout plan in December 2015

1. Basic concepts

1. Physical pixel

A physical pixel is the smallest physical display unit on the display (mobile phone screen)

2. Device-independent pixel (density) -independent pixel)

Device-independent pixel (also called density-independent pixel) can be thought of as a point in the computer coordinate system. This point represents a virtual pixel that can be used by the program (for example: CSS pixel)

3. Bitmap pixel

A bitmap pixel is the smallest data unit of a raster image (such as png, jpg, gif, etc.). Each bitmap pixel contains some of its own display information (such as display position, color value, transparency, etc.)

4. Device pixel ratio (referred to as dpr)

Device pixel ratio = Physical pixels/device independent pixels (in a certain direction, x direction or y direction)

5. scale

Scale ratio:

scale = 1/dpr

6. Perfect viewport

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

2. NetEase Lottery Design Plan

NetEase Lottery

Use scale = 1.0 to write the viewport

Use Media Query to determine the html The font-size value of the root element, that is, the rem value

rem + percentage layout

The css code of the media query is as follows:

//网易彩票的响应式布局是采用媒体查询来改变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. Day Cat design plan

Tmall homepage

Use scale = 1.0 to hard-code the viewport

Do not use rem, and the body’s font-size=14px is hard-coded

px + flexbox layout

4. Problems encountered

1. 1px line blur problem under high-definition screen (dpr>1)

In most cases, designers produce When producing manuscripts of various sizes, I first draw a large size (usually 2x) manuscript, then reduce the size, and finally export it. This will cause problems: if the designer draws a 1px line (for example, border: 1px) in the 2x manuscript, if we want to present it in scale=1.0, it will become 0.5px, which is very large Some mobile phones cannot draw 0.5px.
Theoretically, 1 bitmap pixel corresponds to 1 physical pixel, so that the picture can be displayed perfectly and clearly. There is no problem on a normal screen, but on a retina screen (dpr=2) there will be not enough pixels in the bitmap, resulting in a blurry picture.

2. The problem of blurring high-definition pictures under high-definition screens (dpr>1)

For retina screens with dpr=2, 1 bitmap pixel corresponds to 4 physical pixels. Since a single Bitmap pixels cannot be further divided, so the nearest color can only be taken, resulting in a blurred picture (note the above color values). Therefore, for the problem of high-definition pictures, a better solution is to use twice the picture. For example: 200×300(css pixel)img tag, you need to provide a 400×600 image.
For the retina screen with dpr=2, 1 bitmap pixel corresponds to 4 physical pixels. Since a single bitmap pixel cannot be further divided, the color can only be taken from the nearest location, resulting in blurred pictures (note the above several color values). Therefore, for the problem of high-definition pictures, a better solution is to use twice the picture. For example: 200×300 (css pixel) img tag, you need to provide a 400×600 image.

5. The ultimate solution-->Taobao design plan

Taobao homepage

Get the dpr parameters of the mobile phone through js processing, and then dynamically generate the viewpoint

Get the physical pixel width of the mobile phone and divide it into 10 parts. The width of each part is the size of rem.

According to the size of the design draft (px), it will be processed in three situations, using px + rem layout

The relevant scripts are as follows:

$(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. Summary of design plan

From the above analysis, it is not difficult to see that:

NetEase Lottery’s solution is quick to use, has high development efficiency, and has good compatibility, but it is not flexible and sophisticated enough;

Tmall’s solution The design idea is relatively simple, flexbox is very flexible, but the compatibility of flexbox needs to be handled carefully and is not precise enough;

Taobao's solution solves almost all the problems encountered on the mobile side, and it is a perfect solution, but Development efficiency is low and cost is relatively high.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

What are the techniques for using scroll bars in HTML

html jump to other pages in two seconds

How to use the trigger method to pop up the file selection dialog box without clicking the file type input

How to set up the hidden other in a tag The property only displays pictures

The above is the detailed content of What are the layout solutions for mobile terminals in HTML?. For more information, please follow other related articles on the PHP Chinese website!