(1) in the browser and mobile terminal can display good page, add content head
Shortcuts meta: vp + tab
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
The last property is not necessary
lie in
<meta charset="UTF-8">后
Former css stylesheets
(2) the page width changes with a user operation, and no deformation phenomenon
Full width moving end
width:100%;
Set the minimum and maximum width so that the mobile terminal does not distort
max-width:640px;
min-width:320px;
640 and generally 320px
(3) twice in FIG.
Sometimes the resolution and size of the picture are not well adapted page
FIG method using 2x
background-size: 200px 200px; pixel width of a pixel length
(4) the length of the search box with the page scaling mode change
1flex
2margin:0 100px;
3padding:0 100px;
Referring to the search box portion of the width of the parent container, particularly the width can not be artificially disposed around the floating if no effect
max-width: 640px;
/ * Do not fill, then the browser will overflow * /
width: 100%;
(5) the picture is not aligned voids below the baseline
/ * 1 set as a block element
2. Can the text font size to 0
3.vertical-align:bottom*/
1 If both of which make the picture is centered horizontally
It can be rewritten as display: inline-block;
(4) a plurality of different pattern portions in which the same elements
li: first-of-type first li
span: nth-last-of-type (3n) span a multiple of 3 in
(5) Sprite FIG coordinate direction graph with the normal
(6) page structure
Function to divide a page
In the function refinement
Although the specific field in which the product is not the same content
But the structure is the same so the same class name and style
Including new empty class special section
When all of the modifications to be able to distinguish and avoid modifying
(7) Higher is the parent element 0
Inner sub-element is the parent element is not set and the floating height of the expansion width can not cause
The method is to remove floating the parent