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)

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

標(biāo)準(zhǔn)的viewport設(shè)置

視口寬度和設(shè)備保持一致

視口的默認(rèn)縮放比例1.0

不允許用戶自行縮放

最大允許的縮放比例1.0

最小允許的縮放比例1.0

為了是網(wǎng)站在移動(dòng)端有最理想的瀏覽和閱讀寬度而設(shè)定

理想視口，對(duì)設(shè)備來(lái)講，是最理想的視口尺寸

需要手動(dòng)填寫(xiě)meta視口標(biāo)簽通知瀏覽器操作

meta視口標(biāo)簽的主要目的：布局視口的寬度應(yīng)該與理想視口的寬度一致，簡(jiǎn)單理解就是設(shè)備有多寬。我們布局的視口就有多寬

字面意思，他是用戶正在看到的網(wǎng)站的區(qū)域。注意：是網(wǎng)站的區(qū)域

我們可以通過(guò)縮放去操作視覺(jué)視口，但不會(huì)影響視口，布局視口仍保持原來(lái)的寬度

一般移動(dòng)設(shè)備的瀏覽器都是默認(rèn)設(shè)置了一個(gè)布局視口，用于解決早期的PC端頁(yè)面在手機(jī)上顯示的問(wèn)題

IOS\Android基本都將這個(gè)視口分辨率設(shè)置為989px，所以PC上網(wǎng)頁(yè)大多都能在手機(jī)上呈現(xiàn)，只不過(guò)元素看上去很小，一般默認(rèn)可以通過(guò)手動(dòng)縮放網(wǎng)頁(yè)

布局視口layout viewport

視覺(jué)視口 visual viewport

理想視口ideal viewport

meta視口標(biāo)簽

background-size 屬性規(guī)定背景圖像的尺寸

background-size：背景圖片寬度  背景圖片高度；

物理像素點(diǎn)指的是屏幕顯示的最小顆粒，是物理真實(shí)存在。這是廠商在出廠時(shí)就設(shè)置好了，比如蘋(píng)果6\7\8是750*1334

我們開(kāi)發(fā)時(shí)候的1px不是一定等于1個(gè)物理像素的

PC端頁(yè)面，1個(gè)px等于1個(gè)物理像素的，但是移動(dòng)端就不盡相同

一個(gè)px的能顯示的物理像素點(diǎn)的個(gè)數(shù)，稱為物理像素比或屏幕像素比

背景縮放 background-size

PC端和早期的手機(jī)屏幕/普通手機(jī)屏幕：1CSS像素=1物理像素

Retine(視網(wǎng)膜屏幕)是一種顯示技術(shù)，可以將把更多的物理像素壓縮至一塊屏幕里，從而達(dá)到更高的分辨率，并提高屏幕顯示的細(xì)膩程度

對(duì)于一張50px*50px的圖片，在手機(jī)Retina屏中打開(kāi)，按照剛才的物理像素比會(huì)放大倍數(shù)造成圖片模糊

在標(biāo)準(zhǔn)的viewport設(shè)置，使用倍圖來(lái)提高圖片質(zhì)量，解決在高清設(shè)備中的模糊問(wèn)題

通常使用二倍圖，因?yàn)镮Phone6/7/8的影響，但是現(xiàn)在還存在3倍圖4倍圖的情況，這個(gè)看實(shí)際來(lái)發(fā)公司需求

背景圖片 注意縮放問(wèn)題

三星手機(jī)官網(wǎng)

通過(guò)判斷屏幕寬度來(lái)改變樣式，以適應(yīng)不同終端

缺點(diǎn)：

制作麻煩，需要花費(fèi)很大的精力調(diào)兼容性問(wèn)題

京東商城手機(jī)版

淘寶觸屏版

蘇寧易購(gòu)手機(jī)版

通常情況下，網(wǎng)址域名前面加m（mobile）可以打開(kāi)移動(dòng)端。通過(guò)判斷設(shè)備，如果是移動(dòng)設(shè)備打開(kāi)，則跳移動(dòng)端頁(yè)面

單獨(dú)制作移動(dòng)端頁(yè)面（主流）

響應(yīng)式頁(yè)面兼容移動(dòng)端

/**CSS3盒子模型/
box-sizing:border-box;
-webkit-box-sizing:border-box;
/*點(diǎn)擊高亮我們需要清除  */-webkit-appearance:none;/*禁用長(zhǎng)安頁(yè)面時(shí)的彈出菜單*/ima,a{-webkit-touch-callout:none;
}

移動(dòng)端CSS初始化推薦使用normalize.css

Normalize.css:保護(hù)了有價(jià)值的默認(rèn)值

Normalize.css:修復(fù)了瀏覽器的bug

Normalize.css:是模塊化

Normalize.css：擁有詳細(xì)的文檔

移動(dòng)端瀏覽器基本以webkit內(nèi)核為主，因此我們就考慮webkit兼容問(wèn)題

我們可以放心使用H5標(biāo)簽和CSS樣式

同時(shí)我們?yōu)g覽器的私有前綴我們只需要考慮添加wenkit即可

移動(dòng)端瀏覽器

CSS初始化normalize.css

特殊樣式

流式布局，就是百分比布局，也稱為非固定像素布局

通過(guò)盒子的寬度設(shè)置成百分比來(lái)根據(jù)屏幕的寬度進(jìn)行伸縮，不受固定相素的限制，內(nèi)容向兩側(cè)填充。

流式布局方式是移動(dòng)web開(kāi)發(fā)使用的比較常見(jiàn)的布局方式

max-width 最大寬度（max-height 最大高度）

mix-width 最大寬度（mix-height 最大高度）

流式布局（百分比布局）