移動端CSS小結

標籤：webp   strong   tps   字型   浮動   sel   break   src   vertica   

Meta 標籤

<meta name="viewport"  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

移動端頁面添加 meta 標籤，可以讓文檔的寬度與裝置的寬度保持1:1，文檔的最大寬度比例是1.0，不允許使用者點擊螢幕放大瀏覽。

 

禁止 iOS 自動識別電話和 Android 自動識別郵箱

<meta name="format-detection" content="telephone=no"/>  

<meta name="format-detection" content=“email=no"/>

 

禁止文本選擇

-webkit-user-select:none

 

屏蔽輸入框陰影，去掉按鈕預設樣式

-webkit-appearance:none

 

border-box

想要設定一個寬度100%的元素，又要設定元素固定的 padding-left 或 padding-right，還有邊框，就會出現水平捲軸，可以用 box-sizing 來解決。

*, *:before, *:after {  

  -webkit-tap-highlight-color: transparent;  

  -webkit-box-sizing: border-box;  

  -moz-box-sizing: border-box;  

  -ms-box-sizing: border-box;  

  box-sizing: border-box;  

}

 

css3 多行文本換行

overflow : hidden;  

text-overflow: ellipsis;  

display: -webkit-box;  

-webkit-line-clamp: 2;  

-webkit-box-orient: vertical;

 

字型不換行，溢出省略符號

width:200px;  

white-space: nowrap;  

text-overflow:ellipsis;   

overflow:hidden;

 

清除浮動影響

.clear:after {  

  content: ".";  

  display: block;  

  height: 0;  

  visibility: hidden;  

  clear: both;  

}  

.clear {  

  *zoom: 1;  

}

 

 

表格內容自動換行

table-layout :fixed;

word-break: break-all;

word-wrap :break-word;

 

 

iOS 快速回彈

 

在 iOS 上如果想讓一個元素擁有像 Native 的滾動效果，可以這樣寫：

overflow-y: scroll;  

-webkit-overflow-scrolling: touch;

 

 

CSS3 元素置中

position: absolute;  

top: 50%;  

left: 50%;  

-ms-transform: translate(-50%,-50%);/*IE9*/  

-moz-transform: translate(-50%,-50%);/*Firefox*/  

-webkit-transform:translate(-50%,-50%);/*Safari and Chrome*/  

-o-transform: translate(-50%,-50%);/*Opera*/  

transform: translate(-50%,-50%);

 

移動端CSS小結