第1章.使用根字號rem作為字號單位

html{font-size:10px}

1.1使用媒體查詢，不同分辨率設(shè)置不同的html的font-size

@(min-width:320px){
   html{font-size:10px;}
}@(min-width:360px){
   html{font-size:11.25px;}
}@(min-width:400px){
   html{font-size:12.5px;}
}@(min-width:640px){
   html{font-size:20px;}
}

給手機(jī)設(shè)置10px的字體大小；對于320px的手機(jī)匹配是10px，其他手機(jī)都是等比例匹配；益吾庫

優(yōu)點：使用CSS即可實現(xiàn)，不需要JS代碼 
缺點：只能匹配部分機(jī)型

1.2使用JS代碼控制html的font-size大小益吾庫

var html = document.querySelector("html");var clientWidth = html.getBoundingClientRect().width;html.style.fontSize = clientWidth/18 + "px";

優(yōu)點：可以匹配所有的機(jī)型，適配很強(qiáng) 
缺點：需要寫JS代碼益吾庫

第2章.禁止a,button,input,optgroup,select,textarea等標(biāo)簽背景變暗效果

在移動端使用<a>標(biāo)簽做按鈕的時候或者文字鏈接的時候，點擊按鈕會出現(xiàn)一個“暗色的”背景，比如如下代碼：益吾庫

<a href="">button1</a><input type="button" value="提交">

在移動端點擊之后 會出現(xiàn)“暗色的”背景，這時候我們需要在CSS中加入如下代碼即可：益吾庫

a,button,input,optgroup,select,textarea{    -webkit-tap-highlight-color:rgba(0,0,0,0);}123

第3章.meta基礎(chǔ)知識點益吾庫

3.1頁面窗口自動調(diào)整到設(shè)備寬度，并禁止用戶縮放頁面

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

屬性基本含義： 
width=device-width:控制viewport的大小，device-width為設(shè)備的寬度 
initial-scale：初始化縮放比例 
minimum-scale：允許用戶縮放的最小比例 
maximum-scale：允許用戶縮放的最大比例 
user-scalable：用戶是否可以手動縮放

3.2忽略將頁面中的數(shù)字識別為電話號碼益吾庫

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

3.3忽略android平臺中對郵箱地址的識別益吾庫

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

3.4當(dāng)網(wǎng)站添加到主屏幕快速啟動方式，可隱藏地址欄，僅針對ios的safari益吾庫

<meta name="apple-mobile-web-app-capable" content="yes">

3.5將網(wǎng)站添加到主屏幕快捷啟動方式，頂端狀態(tài)條樣式，僅針對ios的safari益吾庫

<meta name="apple-mobile-web-app-status-bar-style" content="black"><!-- 可選default、black、black-translucent -->

3.6需要在網(wǎng)站的根目錄下存放favicon圖標(biāo)，防止404請求（使用fiddler可以監(jiān)聽到），在頁面上需要加link如下：益吾庫

<link rel="shortcut icon" href="/favicon.ico">

第4章.移動端如何定義字體font-family益吾庫

body{    font-family:"Helvetica Neue",Helvetica,sans-serif}

第5章.在android或者ios下 撥打電話代碼如下益吾庫

<a href="tel:13341128625">撥打電話給：13341128625</a>

第6章.發(fā)短信（winphone系統(tǒng)無效）益吾庫

<a href="sms:10010">發(fā)短信給：10010</a>1

第7章.webkit表單輸入框placeholder的顏色值改變益吾庫

如果想要默認(rèn)的顏色顯示紅色，代碼如下：input::-webkit-input-placeholder{color:red}
如果想要用戶點擊變?yōu)樗{(lán)色，代碼如下：input:focus::-webkit-input-placeholder{color:blue}

第8章.移動端IOS手機(jī)下清楚輸入框內(nèi)陰影益吾庫

input,textarea{-webkit-appearance:none;}1

第9章.在IOS中 禁止長按鏈接與圖片彈出菜單益吾庫

a,img{-webkit-touch-callout:none}1

第10章.調(diào)用手機(jī)系統(tǒng)自帶的郵件功能益吾庫

10.1 當(dāng)瀏覽者點擊這個鏈接時，瀏覽器會自動調(diào)用默認(rèn)的客戶端電子郵件程序，并在收件人框中自動填上收件人的地址下面

<p><a href="mailto:gugehua@126.com">發(fā)電子郵件</a></p>1
益吾庫

10.2 填寫抄送地址

在IOS手機(jī)下：在收件人地址后用?cc=開頭，如下代碼：益吾庫

<p><a href="mailto:tugenhua@126.com?cc=123456789@qq.com">填寫抄送地址</a></p>

在android手機(jī)下，如下代碼：益吾庫

<p><a href="mailto:tugenhua@126.com?123456789@qq.com">填寫抄送地址</a></p>

10.3填上密件抄送地址益吾庫

在IOS手機(jī)下：緊跟著抄送地址之后，寫上&bcc=，填上密件抄送地址

<a href="mailto:tugenhua@126.com?cc=123456789@qq.com&bcc=aa@qq.com">填上密件抄送地址</a>
益吾庫

在安卓下;如下代碼：

<p><a href="mailto:tugenhua@126.com?123456789@qq.com?aa@qq.com">填上密件抄送地址</a></p>
益吾庫

10.4 包含多個收件人、抄送、密件抄送人，用分號隔(;)開多個收件人的地址即可實現(xiàn)

<p><a href="mailto:gugehua@126.com;123456789@qq.com;aa@qq.com">包含多個收件人、抄送、密件抄送人，用分號隔(;)開多個收件人的地址即可實現(xiàn)</a></p>
益吾庫

10.5 包含主題，用?subject=可以填上主題

<p><a href="mailto:gugehua@126.com?subject=【邀請函】">包含主題，可以填上主題</a></p>
益吾庫

10.6包含內(nèi)容，用?body=可以填上內(nèi)容(需要換行的話，使用%0A給文本換行)

<p><a href="mailto:gugehua@126.com?body=我來測試下">包含內(nèi)容，用?body=可以填上內(nèi)容</a></p>
益吾庫

10.7內(nèi)容包含鏈接，含http(s)://等的文本自動轉(zhuǎn)化為鏈接

<p><a href="mailto:tugenhua@126.com?body=http://www.xiuhaier.com">內(nèi)容包含鏈接，含http(s)://等的文本自動轉(zhuǎn)化為鏈接</a></p>益吾庫