有關(guān)于移動(dòng)端的適配布局一直以來都是眾說紛紜，對(duì)應(yīng)的解決方案也是有很多種衙吩。在《使用Flexible實(shí)現(xiàn)手淘H5頁面的終端適配》提出了Flexible的布局方案，隨著viewport單位越來越受到眾多瀏覽器的支持，因此在《再聊移動(dòng)端頁面的適配》一文中提出了vw來做移動(dòng)端的適配問題突想。到目前為止不管是哪一種方案沃琅，都還存在一定的缺陷哗咆。言外之意，還沒有哪一個(gè)方案是完美的益眉。

事實(shí)上真的不完美晌柬？其實(shí)不然。最近為了新項(xiàng)目中能更完美的使用vw來做移動(dòng)端的適配郭脂。探討出一種能解決不兼容viewport單位的方案年碘。今天整理一下，與大家一起分享展鸡。如果方案中存在一定的缺陷屿衅，歡迎大家一起拍正。

準(zhǔn)備工作

對(duì)于Flexible或者說vw的布局莹弊，其原理不在這篇文章進(jìn)行闡述涤久。如果你想追蹤其中的原委，強(qiáng)烈建議你閱讀早前整理的文章《使用Flexible實(shí)現(xiàn)手淘H5頁面的終端適配》和《再聊移動(dòng)端頁面的適配》忍弛。

說句題外話拴竹，由于Flexible的出現(xiàn)，也造成很多同學(xué)對(duì)rem的誤解剧罩。正如當(dāng)年大家對(duì)div的誤解一樣栓拜。也因此，大家都覺得rem是萬能的，他能直接解決移動(dòng)端的適配問題幕与。事實(shí)并不是如此挑势，至于為什么，我想大家應(yīng)該去閱讀flexible.js源碼啦鸣，我相信你會(huì)明白其中的原委潮饱。

回到我們今天要聊的主題，怎么實(shí)現(xiàn)vw的兼容問題诫给。為了解決這個(gè)兼容問題香拉，我將借助Vue官網(wǎng)提供的構(gòu)建工程以及一些PostCSS插件來完成。在繼續(xù)后面的內(nèi)容之前中狂，需要準(zhǔn)備一些東西：

• NodeJs
• NPM
• Webpack
• Vue-cli
• postcss-import
• postcss-url
• postcss-aspect-ratio-mini
• postcss-cssnext
• autoprefixer
• postcss-px-to-viewport
• postcss-write-svg
• cssnano
• postcss-viewport-units
• Viewport Units Buggyfill

對(duì)于這些起什么作用凫碌，先不闡述，后續(xù)我們會(huì)聊到上述的一些東西胃榕。

使用Vue-cli來構(gòu)建項(xiàng)目

對(duì)于NodeJs盛险、NPM和Webpack相關(guān)介紹，大家可以查閱其對(duì)應(yīng)的官網(wǎng)勋又。這里默認(rèn)你的系統(tǒng)環(huán)境已經(jīng)安裝好Nodejs苦掘、NPM和Webpack。我的系統(tǒng)目前使用的Node版本是v9.4.0楔壤；NPM的版本是v5.6.0鹤啡。事實(shí)上，這些都并不重要蹲嚣。

使用Vue-cli構(gòu)建項(xiàng)目

為了不花太多的時(shí)間去深入的了解Webpack（Webpack對(duì)我而言揉忘，太蛋疼了），所以我直接使用Vue-cli來構(gòu)建自己的項(xiàng)目端铛，因?yàn)槲乙话闶褂肰ue來做項(xiàng)目。如果你想深入的了解Webpack疲眷，建議你閱讀下面的文章：

• Webpack文檔
• Awesome Webpack
• Webpack 教程資源收集
• Vue+Webpack開發(fā)可復(fù)用的單頁面富應(yīng)用教程

接下來的內(nèi)容禾蚕，直接使用Vue官方提供的Vue-cli的構(gòu)建工具來構(gòu)建Vue項(xiàng)目。首先需要安裝Vue-cli：

$ npm install -g vue-cli

全局先安裝Vue-cli狂丝，假設(shè)你安裝好了Vue-cli换淆。這樣就可以使用它來構(gòu)建項(xiàng)目：

vue init webpack vw-layout

根據(jù)命令提示做相應(yīng)的操作：

image

進(jìn)入到剛創(chuàng)建的vw-layout:

cd vw-layout

然后執(zhí)行:

npm run dev

在瀏覽器執(zhí)行http://localhost:8080，就可以看以默認(rèn)的頁面效果：

image

以前的版本需要先執(zhí)行npm i安裝項(xiàng)目需要的依賴關(guān)系〖秆眨現(xiàn)在新版本的可以免了倍试。

這時(shí)，可以看到的項(xiàng)目結(jié)構(gòu)如下：

使用Vue-cli構(gòu)建項(xiàng)目

安裝PostCSS插件

通過Vue-cli構(gòu)建的項(xiàng)目蛋哭，在項(xiàng)目的根目錄下有一個(gè).postcssrc.js县习，默認(rèn)情況下已經(jīng)有了：

module.exports = {
    "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        "autoprefixer": {}
    }
}

對(duì)應(yīng)我們開頭列的的PostCSS插件清單，現(xiàn)在已經(jīng)具備了：

• postcss-import
• postcss-url
• autoprefixer

簡(jiǎn)單的說一下這幾個(gè)插件。

postcss-import

postcss-import相關(guān)配置可以點(diǎn)擊這里躁愿。目前使用的是默認(rèn)配置叛本。只在.postcssrc.js文件中引入了該插件。

postcss-import主要功有是解決@import引入路徑問題彤钟。使用這個(gè)插件来候，可以讓你很輕易的使用本地文件、node_modules或者web_modules的文件逸雹。這個(gè)插件配合postcss-url讓你引入文件變得更輕松营搅。

postcss-url

postcss-url相關(guān)配置可以點(diǎn)擊這里。該插件主要用來處理文件梆砸，比如圖片文件转质、字體文件等引用路徑的處理。

在Vue項(xiàng)目中辫樱，vue-loader已具有類似的功能峭拘，只需要配置中將vue-loader配置進(jìn)去。

autoprefixer

autoprefixer插件是用來自動(dòng)處理瀏覽器前綴的一個(gè)插件狮暑。如果你配置了postcss-cssnext鸡挠，其中就已具備了autoprefixer的功能。在配置的時(shí)候搬男，未顯示的配置相關(guān)參數(shù)的話拣展，表示使用的是Browserslist指定的列表參數(shù)，你也可以像這樣來指定last 2 versions 或者 > 5%缔逛。

如此一來备埃，你在編碼時(shí)不再需要考慮任何瀏覽器前綴的問題，可以專心擼碼褐奴。這也是PostCSS最常用的一個(gè)插件之一按脚。

其他插件

Vue-cli默認(rèn)配置了上述三個(gè)PostCSS插件，但我們要完成vw的布局兼容方案敦冬，或者說讓我們能更專心的擼碼辅搬，還需要配置下面的幾個(gè)PostCSS插件：

• postcss-aspect-ratio-mini
• postcss-px-to-viewport
• postcss-write-svg
• postcss-cssnext
• cssnano
• postcss-viewport-units

要使用這幾個(gè)插件，先要進(jìn)行安裝：

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S   

安裝成功之后脖旱，在項(xiàng)目根目錄下的package.json文件中堪遂，可以看到新安裝的依賴包：

"dependencies": {
    "cssnano": "^3.10.0",
    "postcss-aspect-ratio-mini": "0.0.2",
    "postcss-cssnext": "^3.1.0",
    "postcss-px-to-viewport": "0.0.3",
    "postcss-viewport-units": "^0.1.3",
    "postcss-write-svg": "^3.0.1",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
},

接下來在.postcssrc.js文件對(duì)新安裝的PostCSS插件進(jìn)行配置：

module.exports = {
    "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        "postcss-aspect-ratio-mini": {}, 
        "postcss-write-svg": {
            utf8: false
        },
        "postcss-cssnext": {},
        "postcss-px-to-viewport": {
            viewportWidth: 750,     // (Number) The width of the viewport.
            viewportHeight: 1334,    // (Number) The height of the viewport.
            unitPrecision: 3,       // (Number) The decimal numbers to allow the REM units to grow to.
            viewportUnit: 'vw',     // (String) Expected units.
            selectorBlackList: ['.ignore', '.hairlines'],  // (Array) The selectors to ignore and leave as px.
            minPixelValue: 1,       // (Number) Set the minimum pixel value to replace.
            mediaQuery: false       // (Boolean) Allow px to be converted in media queries.
        }, 
        "postcss-viewport-units":{},
        "cssnano": {
            preset: "advanced",
            autoprefixer: false,
            "postcss-zindex": false
        }
    }
}

特別聲明：由于cssnext和cssnano都具有autoprefixer,事實(shí)上只需要一個(gè)，所以把默認(rèn)的autoprefixer刪除掉萌庆，然后把cssnano中的autoprefixer設(shè)置為false溶褪。對(duì)于其他的插件使用，稍后會(huì)簡(jiǎn)單的介紹践险。

由于配置文件修改了猿妈，所以重新跑一下npm run dev吹菱。項(xiàng)目就可以正常看到了于游。接下來簡(jiǎn)單的介紹一下后面安裝的幾個(gè)插件的作用毁葱。

postcss-cssnext

postcss-cssnext其實(shí)就是cssnext。該插件可以讓我們使用CSS未來的特性贰剥，其會(huì)對(duì)這些特性做相關(guān)的兼容性處理倾剿。其包含的特性主要有：

postcss-cssnext

有關(guān)于cssnext的每個(gè)特性的操作文檔，可以點(diǎn)擊這里瀏覽蚌成。

cssnano

cssnano主要用來壓縮和清理CSS代碼前痘。在Webpack中，cssnano和css-loader捆綁在一起担忧，所以不需要自己加載它芹缔。不過你也可以使用postcss-loader顯式的使用cssnano。有關(guān)于cssnano的詳細(xì)文檔瓶盛，可以點(diǎn)擊這里獲取最欠。

在cssnano的配置中，使用了preset: "advanced"惩猫，所以我們需要另外安裝：

npm i cssnano-preset-advanced --save-dev

cssnano集成了一些其他的PostCSS插件芝硬，如果你想禁用cssnano中的某個(gè)插件的時(shí)候，可以像下面這樣操作：

"cssnano": {
    autoprefixer: false,
    "postcss-zindex": false
}

上面的代碼把autoprefixer和postcss-zindex禁掉了轧房。前者是有重復(fù)調(diào)用拌阴，后者是一個(gè)討厭的東東。只要啟用了這個(gè)插件奶镶，z-index的值就會(huì)重置為1迟赃。這是一個(gè)天坑，千萬記得將postcss-zindex設(shè)置為false厂镇。

postcss-px-to-viewport

postcss-px-to-viewport插件主要用來把px單位轉(zhuǎn)換為vw纤壁、vh、vmin或者vmax這樣的視窗單位捺信，也是vw適配方案的核心插件之一酌媒。

在配置中需要配置相關(guān)的幾個(gè)關(guān)鍵參數(shù)：

"postcss-px-to-viewport": {
    viewportWidth: 750,      // 視窗的寬度，對(duì)應(yīng)的是我們?cè)O(shè)計(jì)稿的寬度残黑，一般是750
    viewportHeight: 1334,    // 視窗的高度，根據(jù)750設(shè)備的寬度來指定斋否，一般指定1334梨水，也可以不配置
    unitPrecision: 3,        // 指定`px`轉(zhuǎn)換為視窗單位值的小數(shù)位數(shù)（很多時(shí)候無法整除）
    viewportUnit: 'vw',      // 指定需要轉(zhuǎn)換成的視窗單位，建議使用vw
    selectorBlackList: ['.ignore', '.hairlines'],  // 指定不轉(zhuǎn)換為視窗單位的類茵臭，可以自定義疫诽，可以無限添加,建議定義一至兩個(gè)通用的類名
    minPixelValue: 1,       // 小于或等于`1px`不轉(zhuǎn)換為視窗單位，你也可以設(shè)置為你想要的值
    mediaQuery: false       // 允許在媒體查詢中轉(zhuǎn)換`px`
}

目前出視覺設(shè)計(jì)稿，我們都是使用750px寬度的奇徒，那么100vw = 750px雏亚，即1vw = 7.5px。那么我們可以根據(jù)設(shè)計(jì)圖上的px值直接轉(zhuǎn)換成對(duì)應(yīng)的vw值摩钙。在實(shí)際擼碼過程罢低，不需要進(jìn)行任何的計(jì)算，直接在代碼中寫px胖笛，比如：

.test {
    border: .5px solid black;
    border-bottom-width: 4px;
    font-size: 14px;
    line-height: 20px;
    position: relative;
}
[w-188-246] {
    width: 188px;
}

編譯出來的CSS：

.test {
    border: .5px solid #000;
    border-bottom-width: .533vw;
    font-size: 1.867vw;
    line-height: 2.667vw;
    position: relative;
}
[w-188-246] {
    width: 25.067vw;
}

在不想要把px轉(zhuǎn)換為vw的時(shí)候网持，首先在對(duì)應(yīng)的元素（html）中添加配置中指定的類名.ignore或.hairlines(.hairlines一般用于設(shè)置border-width:0.5px的元素中)：

<div class="box ignore"></div>

寫CSS的時(shí)候：

.ignore {
    margin: 10px;
    background-color: red;
}
.box {
    width: 180px;
    height: 300px;
}
.hairlines {
    border-bottom: 0.5px solid red;
}

編譯出來的CSS:

.box {
    width: 24vw;
    height: 40vw;
}
.ignore {
    margin: 10px; /*.box元素中帶有.ignore類名，在這個(gè)類名寫的`px`不會(huì)被轉(zhuǎn)換*/
    background-color: red;
}
.hairlines {
    border-bottom: 0.5px solid red;
}

上面解決了px到vw的轉(zhuǎn)換計(jì)算长踊。那么在哪些地方可以使用vw來適配我們的頁面功舀。根據(jù)相關(guān)的測(cè)試：

• 容器適配，可以使用vw
• 文本的適配身弊，可以使用vw
• 大于1px的邊框辟汰、圓角、陰影都可以使用vw
• 內(nèi)距和外距阱佛，可以使用vw

postcss-aspect-ratio-mini

postcss-aspect-ratio-mini主要用來處理元素容器寬高比帖汞。在實(shí)際使用的時(shí)候，具有一個(gè)默認(rèn)的結(jié)構(gòu)

<div aspectratio>
    <div aspectratio-content></div>
</div>

在實(shí)際使用的時(shí)候瘫絮，你可以把自定義屬性aspectratio和aspectratio-content換成相應(yīng)的類名涨冀，比如：

<div class="aspectratio">
    <div class="aspectratio-content"></div>
</div>

我個(gè)人比較喜歡用自定義屬性，它和類名所起的作用是同等的麦萤。結(jié)構(gòu)定義之后鹿鳖，需要在你的樣式文件中添加一個(gè)統(tǒng)一的寬度比默認(rèn)屬性：

[aspectratio] {
    position: relative;
}
[aspectratio]::before {
    content: '';
    display: block;
    width: 1px;
    margin-left: -1px;
    height: 0;
}

[aspectratio-content] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

如果我們想要做一個(gè)188:246（188是容器寬度，246是容器高度）這樣的比例容器壮莹，只需要這樣使用：

[w-188-246] {
    aspect-ratio: '188:246';
}

有一點(diǎn)需要特別注意：aspect-ratio屬性不能和其他屬性寫在一起翅帜，否則編譯出來的屬性只會(huì)留下aspect-ratio的值，比如：

<div aspectratio w-188-246 class="color"></div>

編譯前的CSS如下：

[w-188-246] {
    width: 188px;
    background-color: red;
    aspect-ratio: '188:246';
}

編譯之后：

[w-188-246]:before {
    padding-top: 130.85106382978725%;
}

主要是因?yàn)樵诓寮凶隽讼鄳?yīng)的處理命满，不在每次調(diào)用aspect-ratio時(shí)涝滴，生成前面指定的默認(rèn)樣式代碼，這樣代碼沒那么冗余胶台。所以在使用的時(shí)候歼疮，需要把width和background-color分開來寫：

[w-188-246] {
    width: 188px;
    background-color: red;
}
[w-188-246] {
    aspect-ratio: '188:246';
}

這個(gè)時(shí)候，編譯出來的CSS就正常了：

[w-188-246] {
    width: 25.067vw;
    background-color: red;
}
[w-188-246]:before {
    padding-top: 130.85106382978725%;
}

有關(guān)于寬高比相關(guān)的詳細(xì)介紹诈唬，如果大家感興趣的話韩脏，可以閱讀下面相關(guān)的文章：

• CSS實(shí)現(xiàn)長(zhǎng)寬比的幾種方案
• 容器長(zhǎng)寬比
• Web中如何實(shí)現(xiàn)縱橫比
• 實(shí)現(xiàn)精準(zhǔn)的流體排版原理

目前采用PostCSS插件只是一個(gè)過渡階段，在將來我們可以直接在CSS中使用aspect-ratio屬性來實(shí)現(xiàn)長(zhǎng)寬比铸磅。

postcss-write-svg

postcss-write-svg插件主要用來處理移動(dòng)端1px的解決方案赡矢。該插件主要使用的是border-image和background來做1px的相關(guān)處理杭朱。比如：

@svg 1px-border {
    height: 2px;
    @rect {
        fill: var(--color, black);
        width: 100%;
        height: 50%;
    }
}
.example {
    border: 1px solid transparent;
    border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
}

編譯出來的CSS:

.example {
    border: 1px solid transparent;
    border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch;
}

上面演示的是使用border-image方式，除此之外還可以使用background-image來實(shí)現(xiàn)吹散。比如：

@svg square {
    @rect {
        fill: var(--color, black);
        width: 100%;
        height: 100%;
    }
}

#example {
    background: white svg(square param(--color #00b1ff));
}

編譯出來就是：

#example {
    background: white url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%2300b1ff' width='100%25' height='100%25'/%3E%3C/svg%3E");
}

解決1px的方案除了這個(gè)插件之外弧械，還有其他的方法】彰瘢可以閱讀前期整理的《再談Retina下1px的解決方案》一文刃唐。

特別聲明：由于有一些低端機(jī)對(duì)border-image支持度不夠友好，個(gè)人建議你使用background-image的這個(gè)方案袭景。

CSS Modules

Vue中的vue-loader已經(jīng)集成了CSS Modules的功能唁桩，個(gè)人建議在項(xiàng)目中開始使用CSS Modules。特別是在Vue和React的項(xiàng)目中耸棒，CSS Modules具有很強(qiáng)的優(yōu)勢(shì)和靈活性荒澡。建議看看CSS In JS相關(guān)的資料。在Vue中与殃，使用CSS Modules的相關(guān)文檔可以閱讀Vue官方提供的文檔《CSS Modules》单山。

postcss-viewport-units

postcss-viewport-units插件主要是給CSS的屬性添加content的屬性，配合viewport-units-buggyfill庫給vw幅疼、vh米奸、vmin和vmax做適配的操作。

這是實(shí)現(xiàn)vw布局必不可少的一個(gè)插件爽篷，因?yàn)樯倭诉@個(gè)插件悴晰，這將是一件痛苦的事情。后面你就清楚逐工。

到此為止铡溪，有關(guān)于所需要的PostCSS已配置完。并且簡(jiǎn)單的介紹了各個(gè)插件的作用泪喊，至于詳細(xì)的文檔和使用棕硫，可以參閱對(duì)應(yīng)插件的官方文檔。

vw兼容方案

在《再聊移動(dòng)端頁面的適配》一文中袒啼，詳細(xì)介紹了哈扮，怎么使用vw來實(shí)現(xiàn)移動(dòng)端的適配布局。這里不做詳細(xì)的介紹蚓再。建議你花點(diǎn)時(shí)間閱讀這篇文章滑肉。

先把未做兼容處理的示例二維碼貼一個(gè)：

image

你可以使用手淘App、優(yōu)酷APP摘仅、各終端自帶的瀏覽器靶庙、UC瀏覽器、QQ瀏覽器实檀、Safari瀏覽器和Chrome瀏覽器掃描上面的二維碼惶洲，您看到相應(yīng)的效果：

image

但還有不支持的，比如下表中的No膳犹，表示的就是不支持

正因如此恬吕，很多同學(xué)都不敢嘗這個(gè)螃蟹。害怕去處理兼容性的處理须床。不過不要緊铐料，今天我把最終的解決方案告訴你。

最終的解決方案豺旬，就是使用viewport的polyfill：Viewport Units Buggyfill钠惩。使用viewport-units-buggyfill主要分以下幾步走：

引入JavaScript文件

viewport-units-buggyfill主要有兩個(gè)JavaScript文件：viewport-units-buggyfill.js和viewport-units-buggyfill.hacks.js。你只需要在你的HTML文件中引入這兩個(gè)文件族阅。比如在Vue項(xiàng)目中的index.html引入它們：

<script src="http://g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>

你也可以使用其他的在線CDN地址篓跛，也可將這兩個(gè)文件合并壓縮成一個(gè).js文件。這主要看你自己的興趣了坦刀。

第二步愧沟，在HTML文件中調(diào)用viewport-units-buggyfill，比如：

<script>
    window.onload = function () {
        window.viewportUnitsBuggyfill.init({
            hacks: window.viewportUnitsBuggyfillHacks
        });
    }
</script>

為了你Demo的時(shí)候能獲取對(duì)應(yīng)機(jī)型相關(guān)的參數(shù)鲤遥，我在示例中添加了一段額外的代碼沐寺，估計(jì)會(huì)讓你有點(diǎn)煩：

<script>
    window.onload = function () {
        window.viewportUnitsBuggyfill.init({
        hacks: window.viewportUnitsBuggyfillHacks
        });

        var winDPI = window.devicePixelRatio;
        var uAgent = window.navigator.userAgent;
        var screenHeight = window.screen.height;
        var screenWidth = window.screen.width;
        var winWidth = window.innerWidth;
        var winHeight = window.innerHeight;

        alert(
            "Windows DPI:" + winDPI +
            ";\ruAgent:" + uAgent +
            ";\rScreen Width:" + screenWidth +
            ";\rScreen Height:" + screenHeight +
            ";\rWindow Width:" + winWidth +
            ";\rWindow Height:" + winHeight
        )
    }
</script>

具體的使用。在你的CSS中盖奈，只要使用到了viewport的單位（vw混坞、vh、vmin或vmax ）地方钢坦，需要在樣式中添加content：

.my-viewport-units-using-thingie {
    width: 50vmin;
    height: 50vmax;
    top: calc(50vh - 100px);
    left: calc(50vw - 100px);

    /* hack to engage viewport-units-buggyfill */
    content: 'viewport-units-buggyfill; width: 50vmin; height: 50vmax; top: calc(50vh - 100px); left: calc(50vw - 100px);';
}

這可能會(huì)令你感到惡心究孕，而且我們不可能每次寫vw都去人肉的計(jì)算。特別是在我們的這個(gè)場(chǎng)景中场钉，咱們使用了postcss-px-to-viewport這個(gè)插件來轉(zhuǎn)換vw蚊俺，更無法讓我們?nèi)巳獾娜ヌ砑?code>content內(nèi)容。

這個(gè)時(shí)候就需要前面提到的postcss-viewport-units插件逛万。這個(gè)插件將讓你無需關(guān)注content的內(nèi)容泳猬，插件會(huì)自動(dòng)幫你處理。比如插件處理后的代碼：

image

Viewport Units Buggyfill還提供了其他的功能宇植。詳細(xì)的這里不闡述了得封。但是content也會(huì)引起一定的副作用。比如img和偽元素::before(:before)或::after（:after）指郁。在img中content會(huì)引起部分瀏覽器下忙上，圖片不會(huì)顯示。這個(gè)時(shí)候需要全局添加：

img {
    content: normal !important;
}

而對(duì)于::after之類的闲坎，就算是里面使用了vw單位疫粥，Viewport Units Buggyfill對(duì)其并不會(huì)起作用茬斧。比如：

// 編譯前
.after {
    content: 'after content';
    display: block;
    width: 100px;
    height: 20px;
    background: green;
}

// 編譯后
.after[data-v-469af010] {
    content: "after content";
    display: block;
    width: 13.333vw;
    height: 2.667vw;
    background: green;
}

這個(gè)時(shí)候我們需要通過添加額外的標(biāo)簽來替代偽元素（這個(gè)情景我沒有測(cè)試到，后面自己親測(cè)一下）梗逮。

到了這個(gè)時(shí)候项秉，你就不需要再擔(dān)心兼容問題了。比如下面這個(gè)示例：

image

請(qǐng)用你的手機(jī)慷彤，不管什么APP掃一掃娄蔼，你就可以看到效果。（小心彈框喲）底哗，如果你發(fā)現(xiàn)了還是有問題岁诉，請(qǐng)把彈出來的信息截圖發(fā)給我。

如查你想看看別的機(jī)型效果跋选，可以點(diǎn)擊這里涕癣、這里、這里前标、還有這里属划。整個(gè)示例的源碼，可以點(diǎn)擊這里下載候生。

如果你下載了示你源碼同眯，先要確認(rèn)你的系統(tǒng)環(huán)境能跑Vue的項(xiàng)目，然后下載下來之后，解壓縮，接著運(yùn)行npm i缰泡，再運(yùn)行npm run dev，你就可以看到效果了明肮。

總結(jié)

如果你看到這里了，希望這篇文章對(duì)你有所幫助缭付。能幫助你解決項(xiàng)目中的實(shí)際問題柿估，讓你不再擔(dān)心移動(dòng)端的適配問題。當(dāng)然更希望的是你在實(shí)際的項(xiàng)目中用起這個(gè)方案陷猫，把碰到的問題及時(shí)反饋給偶秫舌。如果你有更好的方案，歡迎在下面的評(píng)論中與我們一起分享绣檬。

著作權(quán)歸作者所有足陨。
商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
原文: https://www.w3cplus.com/mobile/vw-layout-in-vue.html ? w3cplus.com著作權(quán)歸作者所有娇未。
商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處墨缘。
原文: https://www.w3cplus.com/mobile/vw-layout-in-vue.html ? w3cplus.com著作權(quán)歸作者所有。
商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
原文: https://www.w3cplus.com/mobile/vw-layout-in-vue.html ? w3cplus.com