1. 移動(dòng)端基礎(chǔ)
1.1 瀏覽器現(xiàn)狀
PC端常見(jiàn)瀏覽器：360瀏覽器衣赶、谷歌瀏覽器诊赊、火狐瀏覽器、QQ瀏覽器府瞄、百度瀏覽器碧磅、搜狗瀏覽器、IE瀏覽器遵馆。
移動(dòng)端常見(jiàn)瀏覽器：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修改開(kāi)發(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等。
作為開(kāi)發(fā)者無(wú)需關(guān)注這些分辨率脐往，因?yàn)槲覀兂Ｓ玫某叽鐔挝皇?px 休吠。
1.3 常見(jiàn)移動(dòng)端屏幕尺寸
- 其中的 物理像素比 = 實(shí)際像素 / 開(kāi)發(fā)尺寸∫挡荆可以理解為 移動(dòng)端1px * 物理像素比 = 實(shí)際像素瘤礁。
1.4 移動(dòng)端調(diào)試方法
-
Chrome DevTools（谷歌瀏覽器）的模擬手機(jī)調(diào)試势誊。
谷歌瀏覽器模擬手機(jī)調(diào)試 搭建本地web服務(wù)器沟突，手機(jī)和服務(wù)器一個(gè)局域網(wǎng)內(nèi)冠摄，通過(guò)手機(jī)訪問(wèn)服務(wù)器母廷。
使用外網(wǎng)服務(wù)器戈泼，直接IP或域名訪問(wèn)同诫。
2. 視口
- 視口（viewport）就是瀏覽器顯示頁(yè)面內(nèi)容的屏幕區(qū)域咙俩。 視口可以分為布局視口向胡、視覺(jué)視口和理想視口矾湃。
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 視覺(jué)視口 visual viewport
字面意思途戒，它是用戶正在看到的網(wǎng)站的區(qū)域。注意：是網(wǎng)站的區(qū)域僵驰。
我們可以通過(guò)縮放去操作視覺(jué)視口喷斋，但不會(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é)：我們開(kāi)發(fā)最終會(huì)用理想視口久信，而理想視口就是將布局視口的寬度修改為視覺(jué)視口。
2.4 meta標(biāo)簽
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no",maximum-scale=1.0,minimum-scale=1.0>
2.4.1 最標(biāo)準(zhǔn)的viewport設(shè)置
視口寬度和設(shè)備保持一致漓摩。
視口的默認(rèn)縮放比例1.0裙士。
不允許用戶自行縮放。
最大允許的縮放比例1.0管毙。
最小允許的縮放比例1.0潮售。
3. 二倍圖
3.1 物理像素&物理像素比
物理像素點(diǎn)指的是屏幕顯示的最小顆粒，是物理真實(shí)存在的锅风。這是廠商在出廠時(shí)就設(shè)置好了,比如蘋果6 是
750* 1334酥诽。我們開(kāi)發(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屏中打開(kāi)恒界，按照剛才的物理像素比會(huì)放大倍數(shù)，這樣會(huì)造成圖片模糊砚嘴。在標(biāo)準(zhǔn)的
viewport設(shè)置中十酣，使用倍圖來(lái)提高圖片質(zhì)量，解決在高清設(shè)備中的模糊問(wèn)題际长。通常使用二倍圖耸采， 因?yàn)?code>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ū)域旭贬。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"
,maximum-scale=1.0,minimum-scale=1.0>
<title>背景縮放</title>
<style>
div {
width: 500px;
height: 500px;
border: 2px solid red;
background: url(../media/dog.jpg) no-repeat;
/*background-size: 圖片的寬度 , 圖片的高度;*/
/*background-size: 500px 200px;*/
/* 1. 如果只寫一個(gè)參數(shù),該參數(shù)肯定是寬度 , 高度可以省略,這時(shí)將等比例縮放 */
/*background-size: 500px;*/
/* 2. 里面的單位可以跟%這時(shí)相對(duì)于父盒子來(lái)說(shuō)的*/
/*background-size: 50%;*/
/* 3. background-size:cover; 完全覆蓋div盒子可能有部分背景圖片顯示不全 */
/*background-size: cover;*/
/* 4. contain 高度和寬度等比例拉伸當(dāng)寬度或者高度鋪滿div盒子就不再進(jìn)行拉伸，可能會(huì)有部分空白區(qū)域 */
background-size: contain;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4. 移動(dòng)開(kāi)發(fā)選擇和技術(shù)解決方案
4.1 移動(dòng)端主流方案
4.1.1 單獨(dú)制作移動(dòng)端頁(yè)面（主流）
通常情況下搪泳，網(wǎng)址域名前面加
m(mobile)可以打開(kāi)移動(dòng)端骑篙。通過(guò)判斷設(shè)備，如果是移動(dòng)設(shè)備打開(kāi)森书，則跳到移動(dòng)端頁(yè)面。也就是說(shuō)谎势，
PC端和移動(dòng)端為兩套網(wǎng)站凛膏，pc端是pc端的樣式，移動(dòng)端再寫一套脏榆，專門針對(duì)移動(dòng)端適配的一套網(wǎng)站猖毫。
4.1.2 響應(yīng)式頁(yè)面兼容移動(dòng)端（其次）
- 響應(yīng)式網(wǎng)站：即pc和移動(dòng)端共用一套網(wǎng)站，只不過(guò)在不同屏幕下须喂，樣式會(huì)自動(dòng)適配吁断。
4.2 移動(dòng)端技術(shù)解決方案
4.2.1 移動(dòng)端瀏覽器兼容問(wèn)題
移動(dòng)端瀏覽器基本以
webkit內(nèi)核為主，因此我們就考慮webkit兼容性問(wèn)題坞生。我們可以放心使用
H5標(biāo)簽和CSS3樣式仔役。同時(shí)我們?yōu)g覽器的私有前綴我們只需要考慮添加
webkit即可。
4.2.2 移動(dòng)端公共樣式
移動(dòng)端
CSS初始化推薦使用normalize.css是己。Normalize.css：保護(hù)了有價(jià)值的默認(rèn)值又兵。Normalize.css：修復(fù)了瀏覽器的bug。Normalize.css：是模塊化的卒废。Normalize.css：擁有詳細(xì)的文檔沛厨。官網(wǎng)地址： Normalize.css官網(wǎng)地址。
4.3 移動(dòng)端大量使用 CSS3 盒子模型 box-sizing
傳統(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 盒子模型辰企。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"
,maximum-scale=1.0,minimum-scale=1.0>
<title>移動(dòng)端盒子模型</title>
<style>
div:nth-child(1) {
width: 200px;
height: 200px;
padding: 5px;
/* 盒子模型 */
box-sizing: content-box;
border: 10px solid red;
background-color: pink;
}
div:nth-child(2) {
width: 200px;
height: 200px;
padding: 5px;
/* 移動(dòng)端盒子模型 */
box-sizing: border-box;
border: 10px solid skyblue;
background-color: purple;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
4.4移動(dòng)端特殊樣式
- 移動(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; }
- 屬性案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"
,maximum-scale=1.0,minimum-scale=1.0>
<title>移動(dòng)端特殊樣式</title>
<style>
a {
/* 點(diǎn)擊高亮我們需要清除清除 設(shè)置為transparent 完成透明 */
-webkit-tap-highlight-color: transparent;
}
input {
/* 在移動(dòng)端瀏覽器默認(rèn)的外觀在iOS上加上這個(gè)屬性才能給按鈕和輸入框自定義樣式 */
-webkit-appearance: none;
}
/*禁用長(zhǎng)按頁(yè)面時(shí)的彈出菜單*/
img, a {
-webkit-touch-callout: none;
}
</style>
</head>
<body>
<a href="#">點(diǎn)擊</a>
<input type="button" value="按鈕">
<img src="../media/dog.jpg" alt="">
</body>
</html>
5. 移動(dòng)端常見(jiàn)布局
5.1 移動(dòng)端單獨(dú)制作
流式布局（百分比布局）。
flex彈性布局（強(qiáng)烈推薦）况鸣。less+rem+ 媒體查詢布局牢贸。混合布局。
5.2 響應(yīng)式
媒體查詢镐捧。
bootstarp潜索。
5.3 流式布局：
流式布局臭增，就是百分比布局，也稱非固定像素布局竹习。
通過(guò)盒子的寬度設(shè)置成百分比來(lái)根據(jù)屏幕的寬度來(lái)進(jìn)行伸縮誊抛，不受固定像素的限制，內(nèi)容向兩側(cè)填充整陌。
流式布局方式是移動(dòng)
web開(kāi)發(fā)使用的比較常見(jiàn)的布局方式拗窃。經(jīng)常使用
max-width和min-width配合使用。
5.4 流式布局代碼案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"
,maximum-scale=1.0,minimum-scale=1.0>
<title>流式布局-百分比布局</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
width: 100%;
/* 使用流式布局時(shí)最高給定一個(gè)最大泌辫、最小寬度 */
max-width: 980px;
min-width: 320px;
margin: 100px auto;
}
section div {
float: left;
width: 50%;
height: 200px;
}
section div:nth-child(1) {
background-color: pink;
}
section div:nth-child(2) {
background-color: skyblue;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
</section>
</body>
</html>
