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中文網其他相關文章！
