Mobile phone touch screen version of the page development summary

Set viewpoint and screen widths

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

Mainstream resolution

Android: Mainstream models mainly for 480x800, 480x854, 540x960, 720x1280, 800x1280 these five kinds.
(Non-mainstream models also include: 240x320, 320x480, 640x960, three of them, two of which are consistent with the iPhone.) ）
IOS: Mainstream models are mainly 320x480, 640x960, 640x1136, 1024x768, 2048x1536, these five kinds.
WP: Mainstream models mainly for 480x800,720x1280, 768x1280 these three kinds of
added : iphone6:750*1334 iphone6s 1242*2208

Use relative units
1, width, height, fill, boundary are used percentage
2. Font Em/rem
em: Relative parent
rem (root element): relative root Parent
PS: Font unit list (default font size 16px per browser)

Pixels	Ems	Percent	Points
6px	0.375em	37.5%	5pt
7px	0.438em	43.8%	5pt
8px	0.5em	50%	6pt
9px	0.563em	56.3%	7pt
10px	0.625em	62.5%	8pt
11px	0.688em	68.8%	8pt
12px	0.75	75%	9pt
13px	0.813	81.3%	10pt
14px	0.875	87.5%	11pt
15px	0.938	93.8%	11pt
16px	1em	100%	12pt
17px	1.063em	106.3%	13pt
18px	1.125em	112.5%	14pt
19px	1.188em	118.8%	14pt
20px	1.25em	125%	15pt
21px	1.313em	131.3%	16pt
22px	1.375em	137.5%	17pt
23px	1.438em	143.8%	17pt
24px	1.5em	150%	18pt

Make layout easier by using Box-flex wisely
Compatibility wording:

. Flex-box{Overflow:Hidden;Display:-webkit-box;Display:-moz-box;Display:-ms-flexbox;Display:Flex;-webkit-box-orient:Horizontal;width:100%;Height:300px;margin:0 Auto;Color:#fff;text-align:Center;font-family:' Microsoft Yahei ';}. Flex1{width:20%;Height:100%;background:#ff8989;Display:Block;}. Flex2{-webkit-box-flex:1;/*Old-ios 6-, Safari 3.1-6*/-moz-box-flex:1;/*Old-firefox 19-*/-webkit-flex:1;/*Chrome*/-ms-flex:1;/*IE Ten*/Flex:1;background:#1bbc9b;}. Flex3{width:Auto;width:20%;Height:100%;background:#516d81;}

Demo

<! DOCTYPE html>
　
With box-sizing, you can reduce the number of unnecessary calculations
Compatibility wording:
. Sizing {-moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;}
Using CSS Media queries
@media screen and (min-width:640px) {     style }
Other practical tips:
Remove the transparent layer that appears when you click on a handheld device:
A,button,input {    -webkit-tap-highlight-color: rgba (0,0,0,0);     -webkit-tap-highlight-color: transparent;}
Remove the default effect of input under iOS:
input {    resize: none;     -webkit-appearance:none;}
Automatically adjust font size when you prevent the screen from rotating
{    -webkit-text-size-adjust:100%;}
Mobile phone touch screen version of the page development summary