關於行動端h5開發相關內容總結

1.開發行動端，頭部必要的配置

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

font-size,開發過程中是用Js計算的。
公式320/100=螢幕尺寸/fontSize值
3.需要點擊跳轉，語意標籤是a（dispaly:block;）
在語意化考慮的情況下a標籤中新增一個span(disply:block)，span在新增容器
4.為了使用者友善體驗，在開發行動裝置頁面時候設定最大寬度和最小寬度。如

{
 
max-width
:640px;
 
min-width
:320px;
}

5.行動端開發頁面一些預設樣式
禁止a標籤背景

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

禁止長按a,img標籤出現選單列

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

6.單行截取

7.calc的使用，不考慮低版本（ie11以下安卓56以下，opera所有）相容性，建議使用，方便。

8.box-sizing的使用，解決不同瀏覽器盒模型的展現不一致。 （行動端常用）
content-box;預設值標準模型，width和height不包含邊框內邊距外邊距
padding-box;width和height包含內邊距不包含邊框和外邊距
border-box;怪異模型width和height包含內邊距和邊框，不包括外邊距。

9.水平垂直居中（行動端常用）
缺點：需要知道小容器的寬度和高度
格式

<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- height的設定（行動端常用）
normal:默認，自動分配合理的行間距
number設定數字，會與目前字體尺寸相乘來設置，即倍數
length設定固定行間距
%基於目前字體尺寸的百分比行間距
inherit從父元素繼承過來
記住下面公式，利用排除Bug
空白間距=lineHeight - fontSize
設定父元素的line-height為100%就可以沒有留白

11.vertical-align調整圖示垂直置中（行動端常用）
baseline:內容與父元素基線對齊
sub:元素基線與父元素下標基線對齊
super:元素基線與父元素上標基線對齊
top:元素及其後代頂端與整行頂端對齊
text-top:元素頂端與父元素字體的頂端對齊
middel:元素中線與父元素的基線對齊
bottom:元素及其後代底部與整行的底端對齊
text-bottom:元素底端與父元素字體的底端對齊
percentage:百分比指定偏移量。基線是0%
length:數值方式，基線是0（常用）

12.flex的使用
使用flex時候，如果兩列不是平均分配，試試給width設定為0
https://csstriggers.com/檢查css屬性觸發的哪些流程

以上是關於行動端h5開發相關內容總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！