Shulou(Shulou.com)06/01 Report--

The purpose of this article is to share with you about the layout of mobile devices in HTML. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Note: the code runs in file protocol. Referencing local files is not supported in chrome, which will prompt a cross-domain error. You can open it with firefox or Safari.

Wty2368

Research on the layout of Mobile Terminal

This paper studies the wap home page style layout of Taobao, Tmall and NetEase lottery 163s, and summarizes the mobile layout scheme.

Note: the code runs in file protocol. Referencing local files is not supported in chrome, which will prompt a cross-domain error. You can open it with firefox or Safari.

Ppt download done at that time: exploration of Mobile layout Plan in December 2015

I. basic concepts

1. Physical pixels (physicalpixel)

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

two。 Device Independent Pixel (density-independentpixel)

Device-independent pixels (also known as density-independent pixels) can be thought of as a point in a computer coordinate system that represents a virtual pixel that can be used by a program (for example, CSS pixels)

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 (dpr for short)

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

5.scale

Zoom ratio:

Scale=1/dpr

6. Perfect Viewport

Second, NetEase lottery design scheme

NetEase Lottery

Using scale=1.0 to write dead viewport

A media query is used to determine the font-size value of the html root element

Rem+ percentage layout

The css code for media query is as follows:

/ / the responsive layout of NetEase lottery is realized by using media query to change the remvalue.

/ / Media query css#media-query {

@ mediascreenand (min-width:240px) {

Html,body,button,input,select,textarea {

FontMutual sizevus 9pxcolors

}

}

@ mediascreenand (min-width:320px) {

Html,body,button,input,select,textarea {

FontMutual sizeza 12pxsubscription

}

}

@ mediascreenand (min-width:374px) {

Html,body,button,input,select,textarea {

FontMutual sizevus 14pxcolors

}

}

@ mediascreenand (min-width:400px) {

Html,body,button,input,select,textarea {

FontMutual sizeza 15pxcake

}

}

/ / omit

}

3. Tmall's design plan

Tmall homepage

Using scale=1.0 to write dead viewport

Write death by font-size=14px without rem,body

Px+flexbox layout

IV. Problems encountered

1. Blur problem of 1px line under HD screen (dpr > 1)

In most cases, designers produce manuscripts of all sizes, first draw large (usually 2x) manuscripts, then reduce the size, and finally export. This can cause problems: if the designer draws a 1px line (such as border:1px) in a 2-fold manuscript, if we want to present it in scale=1.0, it will become 0.5px, and a large number of phones can't draw 0.5px.

In theory, a bitmap pixel corresponds to a physical pixel, and the picture can be displayed perfectly and clearly. There is no problem under the normal screen, but under the retina screen (dpr=2), there will be insufficient pixel points in the bit image, resulting in blurred images.

two。 Blurring of high-definition pictures under high-definition screen (dpr > 1)

For dpr=2 's retina screen, one bitmap pixel corresponds to four physical pixels, and since a single bitmap pixel cannot be further divided, it can only be colored nearby, resulting in blurring of the picture (note the above color values). Therefore, for the problem of high-definition pictures, the better solution is to use twice as many pictures. For example: 200 × 300 (csspixel) img tag, you need to provide 400x600 pictures.

For dpr=2 's retina screen, one bitmap pixel corresponds to four physical pixels, and since a single bitmap pixel cannot be further divided, it can only be colored nearby, resulting in blurring of the picture (note the above color values). Therefore, for the problem of high-definition pictures, the better solution is to use twice as many pictures. For example: 200 × 300 (csspixel) img tag, you need to provide 400x600 pictures.

The Ultimate solution-- > Taobao Design

Taobao homepage

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

Get the physical pixel width of the phone, divided into 10 parts, and the width of each part is the size of the rem.

According to the size of the design draft (px) is divided into three cases, using px+rem layout

The related scripts are as follows:

$(document) .ready (function () {

Vardpr,rem,scale

VardocEl=document.documentElement

VarfontEl=document.createElement ('style')

VarmetaEl=document.querySelector ('meta [name = "viewport"]')

Varview1=document.querySelector ('# view-1')

If (window.screen.width

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.