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

1.開發行動端，頭部必要的配置
viewport" content="width=device-width,initial-scale= 1,user-scalable=no">（各屬性值不在介紹，在開發中小米（2016年小米4）測試user-scalable=no是不起作用的）
2.rem的使用設定根節點的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-callout:none;
}
流暢捲動
body{
-webkit-# overflow-scrolling:touch;
}

6.單行截取參考http://www.cnblogs.com/victory820/p/6728904.html

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

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

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

< ;p class="child">

.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開發相關內容總結css篇的詳細內容。更多資訊請關注PHP中文網其他相關文章！