1.0 移動(dòng)端基礎(chǔ)
1.1 瀏覽器現(xiàn)狀
PC 端常見瀏覽器：360 瀏覽器、谷歌瀏覽器圆兵、火狐瀏覽器跺讯、QQ 瀏覽器、百度瀏覽器殉农、搜狗瀏覽器刀脏、IE 瀏覽器。
移動(dòng)端常見瀏覽器：UC 瀏覽器超凳，QQ 瀏覽器愈污，歐朋瀏覽器，百度手機(jī)瀏覽器聪建，360 安全瀏覽器钙畔，谷歌瀏覽器，搜狗手機(jī)瀏覽器金麸，獵豹瀏覽器擎析，以及其他雜牌瀏覽器。
國(guó)內(nèi)的 UC 和 QQ，百度等手機(jī)瀏覽器都是根據(jù) Webkit 修改過(guò)來(lái)的內(nèi)核揍魂，國(guó)內(nèi)尚無(wú)自主研發(fā)的內(nèi)核桨醋，就像國(guó)內(nèi)的手機(jī)操作系統(tǒng)都是基于 Android 修改開發(fā)的一樣。
總結(jié)：兼容移動(dòng)端主流瀏覽器现斋，處理 Webkit 內(nèi)核瀏覽器即可喜最。
1.2 手機(jī)屏幕的現(xiàn)狀
移動(dòng)端設(shè)備屏幕尺寸非常多，碎片化嚴(yán)重庄蹋。
Android設(shè)備有多種分辨率：480x800, 480x854, 540x960, 720x1280瞬内，1080x1920 等，還有傳說(shuō)中的 2K限书，4k 屏虫蝶。近年來(lái) iPhone 的碎片化也加劇了，其設(shè)備的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208 等倦西。
作為開發(fā)者無(wú)需關(guān)注這些分辨率能真，因?yàn)槲覀兂Ｓ玫某叽鐔挝皇?px 。
1.3 常見移動(dòng)端屏幕尺寸
1.4 移動(dòng)端調(diào)試方法
Chrome DevTools（谷歌瀏覽器）的模擬手機(jī)調(diào)試搭建本地 Web 服務(wù)器扰柠，手機(jī)和服務(wù)器一個(gè)局域網(wǎng)內(nèi)粉铐，通過(guò)手機(jī)訪問(wèn)服務(wù)器
使用外網(wǎng)服務(wù)器，直接 IP 或域名訪問(wèn)
2.0 視口
視口（viewport）就是瀏覽器顯示頁(yè)面內(nèi)容的屏幕區(qū)域卤档。 視口可以分為布局視口蝙泼、視覺視口和理想視口
2.1 布局視口 layout viewport
一般移動(dòng)設(shè)備的瀏覽器都默認(rèn)設(shè)置了一個(gè)布局視口，用于解決早期的 PC 端頁(yè)面在手機(jī)上顯示的問(wèn)題裆装。
iOS,Android 基本都將這個(gè)視口分辨率設(shè)置為 980px踱承，所以 PC 上的網(wǎng)頁(yè)大多都能在手機(jī)上呈現(xiàn)，只不過(guò)元素看上去很小哨免，一般默認(rèn)可以通過(guò)手動(dòng)縮放網(wǎng)頁(yè)茎活。
2.2 視覺視口 visual viewport
字面意思，它是用戶正在看到的網(wǎng)站的區(qū)域琢唾。注意：是網(wǎng)站的區(qū)域载荔。
我們可以通過(guò)縮放去操作視覺視口，但不會(huì)影響布局視口采桃，布局視口仍保持原來(lái)的寬度懒熙。
2.3 理想視口 ideal viewport
為了使網(wǎng)站在移動(dòng)端有最理想的瀏覽和閱讀寬度而設(shè)定
理想視口，對(duì)設(shè)備來(lái)講普办，是最理想的視口尺寸
需要手動(dòng)添寫 meta 視口標(biāo)簽通知瀏覽器操作
meta 視口標(biāo)簽的主要目的：布局視口的寬度應(yīng)該與理想視口的寬度一致工扎，簡(jiǎn)單理解就是設(shè)備有多寬，我們布局的視口就多寬
總結(jié)：我們開發(fā)最終會(huì)用理想視口衔蹲，而理想視口就是將布局視口的寬度修改為視覺視口
2.4 meta 標(biāo)簽
最標(biāo)準(zhǔn)的 viewport 設(shè)置
視口寬度和設(shè)備保持一致
視口的默認(rèn)縮放比例 1.0
不允許用戶自行縮放
最大允許的縮放比例 1.0
最小允許的縮放比例 1.0
3.0 二倍圖
3.1 物理像素 & 物理像素比
物理像素點(diǎn)指的是屏幕顯示的最小顆粒肢娘，是物理真實(shí)存在的。這是廠商在出廠時(shí)就設(shè)置好了，比如蘋果6 是 750* 1334
我們開發(fā)時(shí)候的 1px 不是一定等于 1 個(gè)物理像素的
一個(gè) px 的能顯示的物理像素點(diǎn)的個(gè)數(shù)橱健，稱為物理像素比或屏幕像素比
如果把 1 張 100*100 的圖片放到手機(jī)里面會(huì)按照物理像素比給我們縮放
lRetina（視網(wǎng)膜屏幕）是一種顯示技術(shù)而钞，可以將把更多的物理像素點(diǎn)壓縮至一塊屏幕里，從而達(dá)到更高的分辨率拘荡，并提高屏幕顯示的細(xì)膩程度臼节。
對(duì)于一張 50px * 50px 的圖片,在手機(jī)或 Retina 屏中打開，按照剛才的物理像素比會(huì)放大倍數(shù)珊皿，這樣會(huì)造成圖片模糊
在標(biāo)準(zhǔn)的 viewport 設(shè)置中网缝，使用倍圖來(lái)提高圖片質(zhì)量，解決在高清設(shè)備中的模糊問(wèn)題
通常使用二倍圖亮隙， 因?yàn)?iPhone 6 的影響背景圖片 注意縮放問(wèn)題
3.2 背景縮放 background-size
background-size 屬性規(guī)定背景圖像的尺寸
background-size: 背景圖片寬度 背景圖片高度;
單位： 長(zhǎng)度|百分比|cover|contain;
cover 把背景圖像擴(kuò)展至足夠大途凫，以使背景圖像完全覆蓋背景區(qū)域垢夹。
contain 把圖像圖像擴(kuò)展至最大尺寸溢吻，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域
4.0 移動(dòng)開發(fā)選擇和技術(shù)解決方案
4.1 移動(dòng)端主流方案
- 單獨(dú)制作移動(dòng)端頁(yè)面（主流）
通常情況下，網(wǎng)址域名前面加 m(mobile) 可以打開移動(dòng)端果元。通過(guò)判斷設(shè)備促王，如果是移動(dòng)設(shè)備打開，則跳到移動(dòng)端頁(yè)面而晒。
也就是說(shuō)蝇狼，PC 端和移動(dòng)端為兩套網(wǎng)站，PC 端是 PC 端的樣式倡怎，移動(dòng)端在寫一套迅耘，專門針對(duì)移動(dòng)端適配的一套網(wǎng)站
京東 PC 端：
京東移動(dòng)端：
- 響應(yīng)式頁(yè)面兼容移動(dòng)端（其次）
響應(yīng)式網(wǎng)站：即 PC 和移動(dòng)端共用一套網(wǎng)站，只不過(guò)在不同屏幕下监署，樣式會(huì)自動(dòng)適配
4.2 移動(dòng)端技術(shù)解決方案
- 移動(dòng)端瀏覽器兼容問(wèn)題
移動(dòng)端瀏覽器基本以 webkit內(nèi)核為主颤专，因此我們就考慮 webkit 兼容性問(wèn)題。
我們可以放心使用 H5 標(biāo)簽和 CSS3 樣式钠乏。
同時(shí)我們?yōu)g覽器的私有前綴我們只需要考慮添加 webkit 即可
- 移動(dòng)端公共樣式
移動(dòng)端 CSS 初始化推薦使用 normalize.css/
Normalize.css：保護(hù)了有價(jià)值的默認(rèn)值
Normalize.css：修復(fù)了瀏覽器的bug
Normalize.css：是模塊化的
Normalize.css：擁有詳細(xì)的文檔
官網(wǎng)地址： http://necolas.github.io/normalize.css/
4.3 移動(dòng)端大量使用 CSS3 盒子模型 box-sizin
傳統(tǒng)模式寬度計(jì)算：盒子的寬度 = CSS 中設(shè)置的 width + border + padding
CSS3 盒子模型： 盒子的寬度= CSS 中設(shè)置的寬度 width 里面包含了 border 和 padding
也就是說(shuō)栖秕，我們的 CSS3 中的盒子模型， padding 和 border 不會(huì)撐大盒子了
/*CSS3盒子模型*/
box-sizing: border-box;
/*傳統(tǒng)盒子模型*/
box-sizing: content-box;
移動(dòng)端可以全部 CSS3 盒子模型
PC 端如果完全需要兼容晓避，我們就用傳統(tǒng)模式簇捍，如果不考慮兼容性，我們就選擇CSS3 盒子模型
4.4 移動(dòng)端特殊樣式
/*CSS3 盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*點(diǎn)擊高亮我們需要清除 設(shè)置為transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移動(dòng)端瀏覽器默認(rèn)的外觀在 iOS 上加上這個(gè)屬性才能給按鈕和輸入框自定義樣式*/
-webkit-appearance: none;
/*禁用長(zhǎng)按頁(yè)面時(shí)的彈出菜單*/
img,a { -webkit-touch-callout: none; }
5.0 移動(dòng)端常見布局
移動(dòng)端單獨(dú)制作
- 流式布局（百分比布局）
-
flex彈性布局（強(qiáng)烈推薦） -
less+rem+媒體查詢布局 - 混合布局
響應(yīng)式
- 媒體查詢
bootstarp
流式布局：
流式布局俏拱，就是百分比布局暑塑，也稱非固定像素布局。
通過(guò)盒子的寬度設(shè)置成百分比來(lái)根據(jù)屏幕的寬度來(lái)進(jìn)行伸縮锅必，不受固定像素的限制事格，內(nèi)容向兩側(cè)填充。
流式布局方式是移動(dòng) web 開發(fā)使用的比較常見的布局方式。
