前言

作為一個(gè)小前端，經(jīng)常要和H5打交道，這就面臨著不同終端的適配問題。

Flexible方案通過Hack手段來根據(jù)設(shè)備的dpr值相應(yīng)改變<meta>標(biāo)簽中viewport的值，給我更貼切的體會(huì)就是通過js腳本根據(jù)設(shè)備的dpr和設(shè)計(jì)圖的寬度來計(jì)算出html的font-size值，然后就運(yùn)用rem單位開發(fā)可以等比例縮放的H5頁面。

但是！Flexible已經(jīng)完成了他自身的歷史使命，我們可以放下Flexible，擁抱新的變化。

做到適配要解決的問題

• 在移動(dòng)端布局，我們需要面對(duì)兩個(gè)最為重要的問題：
• 各終端下的適配問題
• Retina屏的細(xì)節(jié)處理

不同的終端，我們面對(duì)的屏幕分辨率、DPR、1px、2x圖等一系列的問題。那么這個(gè)布局方案也是針對(duì)性的解決這些問題，只不過解決這些問題不再是使用Hack手段來處理，而是直接使用原生的CSS技術(shù)來處理的。

適配終端

以前的Flexible方案是通過JavaScript來模擬vw的特性，那么到今天為止，vw已經(jīng)得到了眾多瀏覽器的支持，也就是說，可以直接考慮將vw單位運(yùn)用于我們的適配布局中。

vw是基于Viewport視窗的長度單位，這里的視窗（Viewport）指的就是瀏覽器可視化的區(qū)域，而這個(gè)可視區(qū)域是window.innerWidth/window.innerHeight的大小。用下圖簡單的來示意一下：

藍(lán)色區(qū)域就是 window.innerWidth 和 window.innerHeight

在CSS Values and Units Module Level 3中和Viewport相關(guān)的單位有四個(gè)，分別為vw、vh、vmin和vmax。

• vw：是Viewport's width的簡寫,1vw等于window.innerWidth的1%
• vh：和vw類似，是Viewport's height的簡寫，1vh等于window.innerHeihgt的1%
• vmin：vmin的值是當(dāng)前vw和vh中較小的值
• vmax：vmax的值是當(dāng)前vw和vh中較大的值

如果設(shè)計(jì)稿用750px寬度的，100vw = 750px，即1vw = 7.5px。那么我們可以根據(jù)設(shè)計(jì)圖上的px值直接轉(zhuǎn)換成對(duì)應(yīng)的vw值。如果不想自己計(jì)算，我們可以使用PostCSS的插件postcss-px-to-viewport，讓我們可以直接在代碼中寫px。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論