Summary of content related to mobile h5 development

1. To develop the mobile terminal, the necessary head configuration

<meta name="
viewport
" content="
width
=device-width,initial-scale=1,user-
scala
ble=no">（各
属性
值不在介绍，在开发中小米（2016年小米4）测试user-scalable=no是不起作用的）

font-size 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 default styles of mobile development pages
prohibit a label background

a,button,input,optgroup,select,textare{
 // 去掉a,input,button点击时蓝色外边框和灰色半透明
 -webkit-tap-highlight-color:rgba(0,0,0,0);
}

prohibit long pressing a,img label The menu bar appears

a,img{
 // 禁止长按显示菜单栏
 -webkit-touch-c
all
out:none;
}
流畅滚动
body{
 -webkit-
overflow
-scrolling:touch;
}

6. Single line interception

7.calc is used, regardless of the compatibility of low versions (ie11 below, Android 56 below, opera all), it is recommended to use, convenient .

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 the inner margin of the border and outer margin
padding-box;width and height include the inner margin but do not include the border and outer margin
border-box; Weird model width and height include padding and borders, not 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="parent">
 <p class="child"></p>
</p>
.parent{
 
position
:relative;
 width:100px;
 height:100px;
 
background-color
:red;
}
// 注意是四个方向都是0
.child{
 position:absolute;
 
margin
:auto;
 
top
:0;
 
right
;0;
 
bottom
:0;
 
left
:0;
 width:50px;
 height:50px;
 background-color:gold;
}

10.line- Setting of height (commonly used on mobile terminals)
normal: Default, automatically assigns reasonable line spacing
number sets the number, which will be set by multiplying the current font size, that is, the multiple
length sets a fixed line Spacing
% is based on the percentage of the current font size. Line spacing
inherit inherits from the parent element . Remember the following formula and use it to eliminate bugs
White space spacing = lineHeight - fontSize
Set the line-height of the parent element to 100% to leave no white space

11.

vertical-alignAdjust the icon to be vertically centered (commonly used on mobile terminals) baseline: Content is aligned with the parent element's baseline
sub: The element's baseline is aligned with the parent element's subscript baseline

super: The element's baseline is aligned with the parent element's superscript baseline top: The top of the element and its descendants Aligned to 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 center line of the element is aligned with the baseline of the parent element
bottom: The bottom of the element and its descendants is aligned with the bottom of the entire line End alignment
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, 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. For more information, please follow other related articles on the PHP Chinese website!