移動端web頁面開發CSS部分知識小結
參考來源：
http://www.imooc.com/article/9153
http://blog.csdn.net/fungleo/article/details/50811739
一、字體
三大手機系統的默認字體現狀如下：
| 默認字體 | IOS系統 | Android系統 | WinPhone系統 |
|---|---|---|---|
| 默認中文字體 | Heiti SC | Droidsansfallback | Dengxian(方正等線體) |
| 默認英文字體 | Helvetica | Droid Sans | Segoe |
| 默認數字字體 | HelveticaNeue | Droid Sans | Segoe |
| 三大系統均無微軟雅黑字體 |
總結：各個手機系統有自己的默認字體，且都不支持微軟雅黑，如無特殊需求，手機端無需定義中文字體，英文字體和數字字體可使用系統默認的Helvetica ，三種系統都支持，即：
/*移動端定義字體的代碼*/
body{font-family:Helvetica}二、字號單位
適配移動端比較好的佈局方式是百分比+rem佈局。
使用rem可以適配各種移動設備，如適配iPhone和iPad等分辨率差別比較挺大的設備
rem的取值只是相對於根元素htm的font-size，即只需要設置根元素的font-size，其它元素使用rem單位設置成相應的百分比即可。你再用@media寫一下不同尺寸下跟元素html的font-size的值即可。然後神奇的事情就發生了。當你改變尺寸時，字體。圖片等，就會自動跟着適應了。
rem配置參考代碼如下：
<style type="text/css">
@charset "utf-8";
@media only screen and (max-width: 315px){ html { font-size: 50% !important; } }
@media only screen and (min-width: 316px){ html { font-size: 62.5% !important; } }
@media only screen and (min-width: 640px){ html { font-size: 125% !important; } }
@media only screen and (min-width: 750px){ html { font-size: 150% !important; } }
@media only screen and (min-width: 1242px){ html { font-size: 187.5% !important; } }
</style>三、去掉用戶點擊一個元素時出現的半透明灰色遮罩
3.1、去掉ios系統中元素被觸摸時產生的半透明灰色遮罩
ios用戶點擊一個鏈接，會出現一個半透明灰色遮罩, 如果想要禁用，可設置-webkit-tap-highlight-color的alpha值爲0，也就是屬性值的最後一位設置爲0就可以去除半透明灰色遮罩。
<style>
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0);}
</style>3.2、去掉部分android系統中元素被點擊時產生的邊框
android用戶點擊一個鏈接，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣，可設置-webkit-tap-highlight-color的alpha值爲0去除部分機器自帶的效果。
<style>
a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only; }
</style>-webkit-user-modify有個副作用，就是輸入法不再能夠輸入多個字符。 另外，有些機型去除不了，如小米2 對於按鈕類還有個辦法，不使用a或者input標籤，直接用div標籤
3.3、去掉winphone系統a、input標籤被點擊時產生的半透明灰色背景
<meta name="msapplication-tap-highlight" content="no">3.4、移動端取消touch高亮效果——總結3.1\3.2\3.3
在做移動端頁面時，會發現所有a標籤在觸發點擊時或者所有設置了僞類 :active 的元素，默認都會在激活狀態時，顯示高亮框，如果不想要這個高亮，那麼你可以通過css以下方法來進行全局的禁止：
<style>
html{ -webkit-tap-highlight-color: rgba(0,0,0,0); }
</style>但這個方法在三星的機子上無效，有一種妥協的方法是把頁面非真實跳轉鏈接的a標籤換成其它標籤，可以解決這個問題。
四、webkit表單元素
4.1、重置webkit表單元素的默認外觀
<style>
.css{-webkit-appearance:none;}
</style>4.2、改變webkit表單輸入框placeholder的顏色值
<style>
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEE;}
</style>4.3、webkit表單輸入框placeholder的文字換行
iOS可以，Android不行
4.4、清除輸入框內陰影
在iOS上，輸入框默認有內部陰影，但無法使用 box-shadow 來清除，如果不需要陰影，可以這樣關閉：
<style>
input,textarea{
border:0;/*方法一*/
--webkit-appearance: none;/*方法二*/
}
</style>五、鍵盤輸入
5.1、關閉iOS鍵盤首字母自動大寫
在iOS中，默認情況下鍵盤是開啓首字母大寫的功能的，如果關閉這個功能，可以這樣：
<input tpye="text" autocapitalize="off">5.2、關閉iOS輸入自動修正
IOS默認輸入法會開啓自動修正輸入內容，這樣的話，用戶經常要操作兩次。如果不希望開啓此功能，我們可以通過input標籤屬性來關閉掉：
<input tpye="text" autocorrect="off">六、用戶操作
6.1、禁止文本縮放
當移動設備橫豎屏切換時，文本的大小會重新計算，進行相應的縮放，當我們不需要這種情況時，可以選擇禁止：
<style>
html{
--webkit-text-size-adjust: 100%;
}
</style>需要注意的是，PC端的該屬性已經被移除，該屬性在移動端要生效，必須設置 meta viewport。
6.2、快速回彈滾動
回彈滾動在手機瀏覽器發展的歷史：
Android 3.0/iOS解決了非body元素的滾動問題，但滾動條不可見，同時iOS上只能通過2個手指進行滾動；
iOS從5.0開始解決了滾動條不可見及增加了快速回彈滾動效果
在iOS上如果你想讓一個元素擁有像 Native 的滾動效果，你可以這樣做：
<style>
.xxx{
overflow: auto;
-webkit-overflow-scrolling:touch;
}
</style>PS:推薦另外一個 iDangero Swiper，這個插件集成了滑屏滾動的強大功能（支持3D），而且還有回彈滾動的內置滾動條。iDangero官方地址:
http://idangero.us/
中文網：http://www.swiper.com.cn/
一個爲移動端觸屏滑動而生的插件
6.3、移動端禁止選中內容
如果你不想用戶可以選中頁面中的內容，那麼你可以在css中禁掉：
<style>
.xxx{
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all （移動端不需要） */
-ms-user-select: none; /* IE 10+ */
}
</style>6.4、如何禁止保存或拷貝圖像（IOS）
通常當你在手機或者pad上長按圖像 img ，會彈出選項存儲圖像 或者拷貝圖像，如果你不想讓用戶這麼操作，那麼你可以通過以下方法來禁止：
<style>
img { -webkit-touch-callout: none; }
</style>6.5、模擬按鈕hover效果
移動端觸摸按鈕的效果，可明示用戶有些事情正要發生，是一個比較好體驗，但是移動設備中並沒有鼠標指針，使用css的hover並不能滿足我們的需求，還好國外有個激活css的active效果，代碼如下，
<script type="text/javascript">
var btnBlue = document.querySelector(".btn-blue");
btnBlue.ontouchstart = function(){
this.className = "btn-blue btn-blue-on"
}
btnBlue.ontouchend = function(){
this.className = "btn-blue"
}
</script>6.6、屏幕旋轉的事件和樣式
屏幕旋轉的樣式:
<style>
//豎屏時使用的樣式
@media all and (orientation:portrait){
.css{}
html{
background-color: blue;
}
}
//橫屏時使用的樣式
@media all and (orientation:landscape){
.css{}
html{
background-color: red;
}
}
</style>屏幕旋轉的事件：window.orientation，
取值：正負90表示橫屏模式、0和180表現爲豎屏模式；
<script>
window.onorientationchange = function(){
switch(window.orientation){
case -90:
case 90:
alert("橫屏："+window.orientation);
case 0:
case 180:
alert("豎屏："+window.orientation);
break;
}
}
</script> 6.7、audio元素和video元素在ios和andriod中無法自動播放
應對方案：觸屏即播
<script type="text/javascript">
$(html).one("touchstart",function(){
audio.play();
})
</script>6.8、搖一搖
HTML5 deviceMotion：封裝了運動傳感器數據的事件，可以獲取手機運動狀態下的運動加速度等數據。
6.9、手機拍照和上傳圖片
<input type="file">的accept屬性
<!-- 選擇照片 -->
<input type="file" accept="images/*">
<input type="file" accept="video/*">使用總結：
iOS有拍照、錄像、選取本地圖片功能
部分android只有選取本地圖片功能
winphone不支持
input控件默認外觀醜陋
6.10、消除transition閃屏
<style type="text/css">
.css{
/*設置內嵌的元素在3D空間如何呈現：保留3D*/
-webkit-transform-style: preserve-3d;
/*設置進行轉換的元素的背面在面對用戶是是否可見：隱藏*/
-webkit-backface-visibility: hidden;
}
</style>6.11、開啓硬件加速
解決頁面閃白
保證動畫流暢
<
style type="text/css">
.css{
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
}
</style>設計高性能CSS3動畫的幾個要素 ：
儘可能地使用合成屬性transform和opacity來設計CSS3動畫
不使用position的left和top來定位
利用translate3D開啓GPU加速
6.12、android 上去掉語音輸入按鈕
<style>
input::-webkit-input-speech-button{
display:none;
}
</style>
