Summary of mobile h5 development-css-Summary, h5css

Summary of mobile h5 development-css-Summary, h5css

Reference http://mp.weixin.qq.com/s/Nho2DHj-Y59j2F62vpN9jQ

1. develop necessary head configurations for mobile terminals
<Meta name = "viewport" content = "width = device-width, initial-scale = 1, user-scalable = no"> (attribute values are not described, testing user-scalable = no in the development of small and medium-sized meters (Xiaomi 4 in 2016) does not work)
2. Use rem to set the font-size of the root node. Js computing is used during development.
Formula 320/100 = screen size/fontSize Value
3. Click to jump. The semantic tag is a (dispaly: block ;)
Add a span (disply: block) to the tag for semantic consideration, and add a container in the span tag.
4. for user-friendly experience, set the maximum width and minimum width when developing mobile pages. For example
{
Max-width: 640px;
Min-width: 320px;
}
5. Some default styles on the mobile development page
Disable a label background
A, button, input, optgroup, select, textare {
// Remove a, input, and button from the blue outer border and gray translucent
-Webkit-tap-highlight-color: rgba (0, 0, 0 );
}
Do not press a long. The img tab displays the menu bar
A, img {
// Disable long-pressed display menu bar
-Webkit-touch-callout: none;
}
Smooth scrolling
Body {
-Webkit-overflow-scrolling: touch;
}

6. Single Row truncation reference http://www.cnblogs.com/victory820/p/6728904.html

7. For calc usage, we recommend that you use calc for convenience without considering the compatibility of earlier versions (less than Android 56 and lower than ie11.

8. The use of box-sizing solves the inconsistency between the presentation of box models in different browsers. (Commonly used on mobile terminals)
Content-box; default value: Standard Model. width and height do not include the border padding.
Padding-box; width and height include the inner margin, excluding the border and the outer margin
Border-box; the width and height of the weird model include the padding and border, excluding the margin.

9. Horizontal and vertical center (commonly used on mobile terminals)
Disadvantage: You need to know the width and height of the small container.
Format
<Div class = "parent">
<Div class = "child"> </div>
</Div>
. Parent {
Position: relative;
Width: 100px;
Height: 100px;
Background-color: red;
}
// Note that the four directions are 0
. Child {
Position: absolute;
Margin: auto;
Top: 0;
Right; 0;
Bottom: 0;
Left: 0;
Width: 50px;
Height: 50px;
Background-color: gold;
}
10. Set line-height (commonly used on mobile terminals)
Normal: by default, reasonable row spacing is automatically allocated.
Number, Which is multiplied by the current font size, that is, a multiple.
Length: set fixed line spacing
% Percent row spacing based on the current font size
Inherit inherits from the parent Element
Remember the following formula and eliminate the Bug
Blank spacing = lineHeight-fontSize
Set the line-height of the parent element to 100%.

11. vertical-align adjust the vertical center of the icon (commonly used on mobile terminals)
Baseline: The content is aligned with the parent element baseline.
Sub: Baseline alignment between the element baseline and parent element subscript
Super: alignment between the element baseline and parent baseline
Top: The top of the element and its descendant is aligned with the top of the whole row.
Text-top: Align the top of the element with the top of the parent element font
Middel: Align the midline of the element with the baseline of the parent Element
Bottom: the bottom of the element and its descendants are aligned with the bottom of the entire row.
Text-bottom: Align the bottom of the element with the bottom of the parent element font
Percentage: percentage specifies the offset. Baseline is 0%
Length: Numeric value, baseline is 0 (commonly used)

12. Use of flex
When using flex, if the two columns are not evenly allocated, Set width to 0.
Https://csstriggers.com/check which process is triggered by cssstores