1.移動端最小設置字體為12px，如果想要更小字體效果： -webkit-transform:scale(0.9); 2.文字超過兩行時，末尾顯示點點的效果： overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box ...
1.移動端最小設置字體為12px，如果想要更小字體效果：
-webkit-transform:scale(0.9);
2.文字超過兩行時，末尾顯示點點的效果：
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
3.文字不換行，長度超過60px時顯示點點的效果：
width: 60px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
-webkit-text-overflow:ellipsis;
4背景圖片的相容性寫法：
background: url("../img/header_bg.png") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 55px;
5.線性漸變條的相容性寫法：
background: -moz-linear-gradient(bottom, #F66E22, #FFD260);
background: -webkit-linear-gradient(bottom, #F66E22, #FFD260);
background: -o-linear-gradient(bottom, #F66E22, #FFD260);
6.多使用flex佈局（一般處理上下左右居中）
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
當然還有其他一些常見的，比如：
flex: 1;(自適應長度)
-webkit-flex: 1;
flex-direction: culumn;（對齊方式）
-webkit-flex-direction: column;
flex-wrap: wrap;(啟用換行，預設不換行)
-webkit-flex-wrap:wrap;
不再贅述，詳細請參考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
