Summary of content related to mobile h5 development css

1. Develop mobile terminal, necessary header configuration
viewport" content="width=device-width,initial-scale= 1, user-scalable=no"> (The values ​​of each attribute are not introduced. During development, Xiaomi (2016 Xiaomi 4) tested user-scalable=no and it did not work. )
2.rem is used to set the font-size of the root node, which is calculated using Js during the development process.
Formula 320/100=Screen size/fontSize value
3. Click to jump, the semantic label is a (dispaly:block;)
In the case of SemanticizationConsidering a Add a span (disply:block) to the tag, and add a container
4 to the span. For user-friendly experience, set the maximum width and minimum width when developing mobile pages. Such as
{
max-width:640px;
min-width:320px;
}
5. Some defaults for mobile development pages Style
Disable a label background
a,button,input,optgroup,select,textare{
// Remove the blue outer border and gray translucency when a,input,button is clicked
-webkit- tap-highlight-color:rgba(0,0,0,0);
}
It is forbidden to long press a,img labelThe menu bar appears
a,img{
// Disable long press to display menu bar
-webkit-touch-callout:none;
}
Smooth scrolling
body{
-webkit- overflow-scrolling:touch;
}

6. For single line interception, please refer to http://www.cnblogs.com/victory820/p/6728904.html

7.calc The use does not consider the compatibility of lower versions (ie11 below and Android 56 below, all Opera), it is recommended to use it for convenience.

8. The use of box-sizing solves the inconsistent display of box models in different browsers. (Commonly used on mobile terminals)
content-box;Default value standard model, width and height do not include bordersInner marginOuter margin
padding-box;width and height include padding and do not include borders and margins
border-box;Weird model width and height include padding and borders, do not include Margins.

9. Horizontal and vertical centering (commonly used on mobile terminals)
Disadvantages: Need to know the width and height of the small container
Format

< ;p class="child">

.parent{
position:relative;
width:100px;
height:100px;
background-color:red;
}
// Note that all 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. Setting of line-height (commonly used on mobile terminals)
normal: Default, automatically allocates reasonable line spacing
number setting number, which will be multiplied by the current font size to set, that is, multiple
length setting Fixed line spacing
% is based on the percentage of the current font size.
inherit inherits from the parent element
Remember the following formula and use it to eliminate bugs
Blank spacing=lineHeight - fontSize
Set the line-height of the parent element to 100% and there will be no white space

11.vertical-alignAdjust icon vertical centering (commonly used on mobile terminals)
baseline: content is aligned with the parent element baseline
sub: element baseline is aligned with the parent element subscript baseline
super: The element baseline is aligned with the superscript baseline of the parent element
top: The top of the element and its descendants are aligned with the top of the entire line
text-top: The top of the element is aligned with the top of the parent element's font
middel: The centerline of the element is aligned with the baseline of the parent element
bottom: The bottom of the element and its descendants are aligned with the bottom of the entire line
text-bottom: The bottom of the element is aligned with the bottom of the parent element's font
percentage: Percentage specifies the offset. The baseline is 0%
length: numerical method, the baseline is 0 (commonly used)

12. Use of flex
When using flex, if the two columns are not evenly distributed, try setting the width to 0
https://csstriggers.com/Check which processes are triggered by css properties

The above is the detailed content of Summary of content related to mobile h5 development css. For more information, please follow other related articles on the PHP Chinese website!