Mobile H5 Development-related content summary CSS Chapter

1. Development of mobile side, head necessary configuration
<meta name= "viewport" content= "Width=device-width,initial-scale=1,user-scalable=no" > (each attribute value is not introduced, In the development of Xiaomi (2016 Xiaomi 4) test user-scalable=no is not working)
2.rem is used to set the root node of the font-size, the development process is calculated with JS.
Formula 320/100= Screen Size/fontsize value
3. Need to click Jump, semantic tag is a (dispaly:block;)
Add a span (Disply:block) to the a tag in case of semantic considerations, and span in the Add container
4. For a user-friendly experience, set the maximum width and minimum width when developing mobile pages. Such as
{
max-width:640px;
min-width:320px;
}
5. Mobile Development Page Some default styles
Prohibit a-label background
a,button,input,optgroup,select,textare{
Remove A,input,button when clicked blue outer border and gray translucent
-webkit-tap-highlight-color:rgba (0,0,0,0);
}
Prohibit long press a,img tab appears menu bar
a,img{
Disable long Press to display the menu bar
-webkit-touch-callout:none;
}
Smooth scrolling
body{
-webkit-overflow-scrolling:touch;
}

6. Single-line intercept reference http://www.cnblogs.com/victory820/p/6728904.html

7.calc use, regardless of the lower version (Ie11 below Android 56, opera All) compatibility, recommended to use, convenient.

The use of 8.box-sizing, to solve different browser box model display inconsistent. (Mobile-side common)
Content-box; default value Standard Model, width and height do not include margin margins in borders
Padding-box;width and height including padding excluding borders and margins
Border-box; The weird model width and height include padding and borders, excluding margins.

9. Horizontal vertical centering (common on mobile)
Cons: Need to know the width and height of small containers
Format
<p class= "Parent" >
<p class= "Child" ></p>
</p>
. parent{
position:relative;
width:100px;
height:100px;
background-color:red;
}
Note that the four directions are all 0.
. child{
Position:absolute;
Margin:auto;
top:0;
right;0;
bottom:0;
left:0;
width:50px;
height:50px;
Background-color:gold;
}
10.line-height settings (mobile-side common)
Normal: Default, automatic allocation of reasonable line spacing
Number is set by multiplying the current font size, which is the multiplier
Length Set fixed line spacing
Percent line spacing based on the current font size
Inherit inherit from the parent element.
Remember the following formula, using the Exclude bug
Blank Spacing =lineheight-fontsize
Setting the line-height of the parent element to 100% can be left blank

11.vertical-align adjustment icons are centered vertically (commonly used on the mobile side)
Baseline: Content aligns with parent element baselines
Sub: element baseline aligned with parent element subscript baseline
Super: Element baseline aligned with parent element's superscript baseline
Top: The top of the element and its descendants are aligned with the top of the entire row
Text-top: Aligns the top of the element with the top of the parent element's font
Middel: Alignment of element midline with parent element's baseline
Bottom: The bottom of the element and its descendants is aligned with the bottom of the entire row
Text-bottom: The bottom of the element is aligned with the bottom of the parent element's font
Percentage: The percentage specifies the offset. The baseline is 0%.
Length: Numerical method, Baseline is 0 (common)

12.flex use
When using Flex, if two columns are not evenly distributed, try giving width set to 0
https://csstriggers.com/Check which procedures the CSS property triggers