四、移动适配
四、移動(dòng)適配
文章目錄
- 四、移動(dòng)適配
- 移動(dòng)端適配
- viewpoint視口
- 媒體查詢
- 參考文章
移動(dòng)端適配
移動(dòng)端Web頁面，即常說的H5頁面、手機(jī)頁面、webview頁面；
手機(jī)設(shè)備屏幕尺寸不一，做移動(dòng)端的Web頁面，需要考慮安卓/IOS的各種尺寸設(shè)備上的兼容，針對(duì)移動(dòng)端設(shè)備的頁面，設(shè)計(jì)與前端實(shí)現(xiàn)怎樣做能更好地適配不同屏幕寬度的移動(dòng)設(shè)備；
移動(dòng)端適配的目的：在不同尺寸的手機(jī)設(shè)備上，頁面“相對(duì)性的達(dá)到合理的展示”或者“保持統(tǒng)一效果的等比縮放”；
viewpoint視口
- visual viewport：可見視口，即屏幕寬度；
- layout viewport：布局視口，即DOM寬度；
- idea viewport：理想適口，使布局視口就是可見視口；
- visual viewport = layout viewport * scale
- 獲取屏幕寬度（visual viewport）的尺寸：window. innerWidth/Height
- 獲取DOM寬度（layout viewport）的尺寸：document. documentElement. clientWidth/Height
移動(dòng)設(shè)備默認(rèn)的 viewport 是 layout viewport，而我們想要的是 idea viewpoint，我們通過使用 meta 標(biāo)簽來實(shí)現(xiàn)我們想要的效果。
meta viewport 標(biāo)簽首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動(dòng)設(shè)備的viewport問題。后來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對(duì)meta viewport的支持，事實(shí)也證明這個(gè)東西還是非常有用的。
在蘋果的規(guī)范中，meta viewport 有6個(gè)屬性：
- width：設(shè)置layout viewport 的寬度，為一個(gè)正整數(shù)，或字符串"width-device"；
- initial-scale：設(shè)置頁面的初始縮放值，為一個(gè)數(shù)字，可以帶小數(shù)；
- minimum-scale：允許用戶的最小縮放值，為一個(gè)數(shù)字，可以帶小數(shù)；
- maximum-scale：允許用戶的最大縮放值，為一個(gè)數(shù)字，可以帶小數(shù)；
- height：設(shè)置layout viewport的高度，這個(gè)屬性對(duì)我們并不重要，很少使用；
- user-scalable：是否允許用戶進(jìn)行縮放，值為"no"或"yes", no 代表不允許，yes代表允許；
理想視口中的網(wǎng)頁用戶最理想的寬度，用戶進(jìn)入頁面的時(shí)候不需要縮放。很明顯，所謂的理想寬度就是瀏覽器（屏幕）的寬度了。
<meta name="viewport" content="width=device-width">然而，這段代碼其實(shí)也并不完美，在IE瀏覽器中，由于橫屏豎屏的切換會(huì)對(duì)其造成影響，為了解決這個(gè)兼容性的問題，再加上一句。
<meta name="viewport" content="width=device-width,initial-scale=1">width=device-width 可以把布局視口設(shè)置成為瀏覽器（屏幕）的寬度。initial-scale=1 的意思是初始縮放的比例是1，使用它的時(shí)候，同時(shí)也會(huì)將布局視口的尺寸設(shè)置為縮放后的尺寸。
加了這行代碼，頁面的寬度就會(huì)跟要適配的設(shè)備寬度一致啦。
媒體查詢
媒體指的就是各種設(shè)備（移動(dòng)設(shè)備,PC設(shè)備），查詢指的是要檢測(cè)屬于哪種設(shè)備。媒體查詢的目的是通過查詢當(dāng)前設(shè)備屬于哪種設(shè)備,讓網(wǎng)頁能夠在不同的設(shè)備下正常的預(yù)覽。
@media 可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)置設(shè)計(jì)響應(yīng)式的頁面，@media 是非常有用的。當(dāng)你重置瀏覽器大小的過程中，頁面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁面。
我們將不同的設(shè)備劃分為不同的類型，媒體類型一共分為四類：
媒體特性用來描述設(shè)備的特點(diǎn)，以下是常用的媒體特性：
- width 網(wǎng)頁顯示區(qū)域完全等于設(shè)置的寬度
- height 網(wǎng)頁顯示區(qū)域完全等于設(shè)置的高度
- max-width / max-height 網(wǎng)頁顯示區(qū)域小于等于設(shè)置的寬度
- min-width / min-width 網(wǎng)頁顯示區(qū)域大于等于設(shè)置的寬度
- orientation: portrait (豎屏模式) | landscape (橫屏模式)
語法關(guān)鍵字可以將媒體類型和媒體特性鏈接到一塊,進(jìn)行設(shè)備檢測(cè)。
- and 可以將多個(gè)媒體特性鏈接到一塊,相當(dāng)于且
- not 排除某個(gè)媒體特性 相當(dāng)于非,可以省略
- only 指定某個(gè)特定的媒體類型, 可以省略
媒體查詢的語法分為外聯(lián)式語法和內(nèi)聯(lián)式語法。外聯(lián)式語法是將 media 在 head 部分引用，內(nèi)聯(lián)式語法是將 media 在中引用。
- 外聯(lián)式語法：
- 內(nèi)聯(lián)式語法：
一個(gè)簡(jiǎn)單的媒體查詢實(shí)例：
<!DOCTYPE html> <html> <head><title>媒體適配</title><meta charset="utf-8"><style>div{width: 600px;height: 600px;background-color: red;}@media (max-width: 800px) {div{width: 500px;height: 500px;background-color: yellow;}}@media (max-width: 500px) {div{width: 300px;height: 300px;background-color: blue;}}</style> </head> <body><div></div> </body> </html>當(dāng)屏幕寬度大于800時(shí)，顯示一個(gè)600*600的大紅塊
小于或等于800時(shí)，顯示一個(gè)500*500的黃色div。
同理，屏幕寬度小于等于500時(shí)，顯示一個(gè)300*300的藍(lán)色div
參考文章
移動(dòng)端適配方案
前端移動(dòng)端適配總結(jié)
響應(yīng)式布局之媒體查詢功能
什么是媒體查詢?
總結(jié)
- 上一篇： 三、前端开发-CSS
- 下一篇： 使用WinSCP上传文件到指定服务器