移動(dòng)端調(diào)試方法
Chrome Devtools（谷歌瀏覽器）的模擬手機(jī)調(diào)試
搭建本地web服務(wù)器，手機(jī)和服務(wù)器一個(gè)局域網(wǎng)內(nèi)，通過手機(jī)訪問服務(wù)器
使用外網(wǎng)服務(wù)器，直接ip或域名訪問
視口（viewport）就是瀏覽器顯示頁(yè)面內(nèi)容的屏幕區(qū)域。視口可以分為布局視口、視覺視口和理想視口
<meta name="viewport" content="width=device-width,user-scalable=no,initail-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">| 屬性 | 解釋說明 |
|---|---|
| width | 寬度設(shè)置的是viewport寬度，可以設(shè)置device-width特殊值 |
| initial-scale | 初始縮放比，大于0的數(shù)字 |
| maximum-scale | 最大縮放比，大于0的數(shù)字 |
| minimum-scale | 最小縮放比 |
| user-scalable | 用戶是否可以縮放，yes或者no（1或0） |
標(biāo)準(zhǔn)的viewport設(shè)置
視口寬度和設(shè)備保持一致
視口的默認(rèn)縮放比例1.0
不允許用戶自行縮放
最大允許的縮放比例1.0
最小允許的縮放比例1.0
為了是網(wǎng)站在移動(dòng)端有最理想的瀏覽和閱讀寬度而設(shè)定
理想視口，對(duì)設(shè)備來講，是最理想的視口尺寸
需要手動(dòng)填寫meta視口標(biāo)簽通知瀏覽器操作
meta視口標(biāo)簽的主要目的：布局視口的寬度應(yīng)該與理想視口的寬度一致，簡(jiǎn)單理解就是設(shè)備有多寬。我們布局的視口就有多寬
字面意思，他是用戶正在看到的網(wǎng)站的區(qū)域。注意：是網(wǎng)站的區(qū)域
我們可以通過縮放去操作視覺視口，但不會(huì)影響視口，布局視口仍保持原來的寬度
一般移動(dòng)設(shè)備的瀏覽器都是默認(rèn)設(shè)置了一個(gè)布局視口，用于解決早期的PC端頁(yè)面在手機(jī)上顯示的問題
IOS\Android基本都將這個(gè)視口分辨率設(shè)置為989px，所以PC上網(wǎng)頁(yè)大多都能在手機(jī)上呈現(xiàn)，只不過元素看上去很小，一般默認(rèn)可以通過手動(dòng)縮放網(wǎng)頁(yè)
布局視口layout viewport
視覺視口 visual viewport
理想視口ideal viewport
meta視口標(biāo)簽
二倍圖
background-size 屬性規(guī)定背景圖像的尺寸
background-size：背景圖片寬度 背景圖片高度；| 屬性 | 說明 |
|---|---|
| 單位 | 長(zhǎng)度|百分比|cover|contain |
| cover | 把背景圖片擴(kuò)展至足夠大，以使背景圖片完全覆蓋北京區(qū)域 |
| contain | 把背景圖像擴(kuò)展至最大尺寸，以使齊寬度和高度完全適應(yīng)內(nèi)容區(qū)域 |
物理像素點(diǎn)指的是屏幕顯示的最小顆粒，是物理真實(shí)存在。這是廠商在出廠時(shí)就設(shè)置好了，比如蘋果6\7\8是750*1334
我們開發(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屏中打開，按照剛才的物理像素比會(huì)放大倍數(shù)造成圖片模糊
在標(biāo)準(zhǔn)的viewport設(shè)置，使用倍圖來提高圖片質(zhì)量，解決在高清設(shè)備中的模糊問題
通常使用二倍圖，因?yàn)镮Phone6/7/8的影響，但是現(xiàn)在還存在3倍圖4倍圖的情況，這個(gè)看實(shí)際來發(fā)公司需求
背景圖片 注意縮放問題
移動(dòng)端主流方案
三星手機(jī)官網(wǎng)
通過判斷屏幕寬度來改變樣式，以適應(yīng)不同終端
缺點(diǎn)：
制作麻煩，需要花費(fèi)很大的精力調(diào)兼容性問題
京東商城手機(jī)版
淘寶觸屏版
蘇寧易購(gòu)手機(jī)版
通常情況下，網(wǎng)址域名前面加m（mobile）可以打開移動(dòng)端。通過判斷設(shè)備，如果是移動(dòng)設(shè)備打開，則跳移動(dòng)端頁(yè)面
單獨(dú)制作移動(dòng)端頁(yè)面（主流）
響應(yīng)式頁(yè)面兼容移動(dòng)端
移動(dòng)端技術(shù)解決方案
/**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兼容問題
我們可以放心使用H5標(biāo)簽和CSS樣式
同時(shí)我們?yōu)g覽器的私有前綴我們只需要考慮添加wenkit即可
移動(dòng)端瀏覽器
CSS初始化normalize.css
特殊樣式
移動(dòng)端技術(shù)選型
流式布局，就是百分比布局，也稱為非固定像素布局
通過盒子的寬度設(shè)置成百分比來根據(jù)屏幕的寬度進(jìn)行伸縮，不受固定相素的限制，內(nèi)容向兩側(cè)填充。
流式布局方式是移動(dòng)web開發(fā)使用的比較常見的布局方式
max-width 最大寬度（max-height 最大高度）
mix-width 最大寬度（mix-height 最大高度）
流式布局（百分比布局）
聯(lián)系客服
