原文參考http://mp.weixin.qq.com/s/Nho2DHj-Y59j2F62vpN9jQ1.開發移動端，頭部必要的配置<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" ...
原文參考http://mp.weixin.qq.com/s/Nho2DHj-Y59j2F62vpN9jQ
1.開發移動端，頭部必要的配置
<meta name="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.水平垂直居中（移動端常用）
缺點：需要知道小容器的寬度和高度
格式
<div class="parent">
<div class="child"></div>
</div>
.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屬性觸發的哪些過程
