記錄移動端適配的幾種方案(flexiblejs,vw)

第一種就是用了好久淘寶團隊開發的flexible.js，

原理經過識別網頁寬度，在html上加dpr及字號（源碼所設置值/10），在移動端設置rem進行自適應。

如設置最大寬度640（設計稿），在網頁寬度爲640時，flexible.js將html字號設置爲64px，即1rem=64px,頁面縮小，1rem所等於的像素即縮小。（這是dpr=1時，當dpr=2時，網頁被縮小二倍，html字號*2，1rem=64*2px，可是所展現的內容不變）
dpr=2時，1設備獨立像素長寬各佔2物理像素。可是字體需單獨進行適配，緣由是flexiblejs 的團隊以爲從體驗上來說，字號不該該由於屏幕大小而變化，並且大多數字體文件都帶一些點陣（16或24px），都是偶數，一樣不但願字體出現單數尺寸，因此要用px進行適配。

寫法以下
.class{
font-size:30px;
}
[data-dpr="2"] .class{
font-size: 60px;
}
[data-dpr="3"] .class{
font-size: 90px;
}
（圖片也要切三份呦）

還有一串js可能你們也見過，原理同上，可是沒有考慮字體，都是用rem進行適配，挺簡單的就不解釋了，代碼以下。

 1 (function (doc, win) {
 2     var docEl = doc.documentElement,
 3         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
 4         recalc = function () {
 5             var clientWidth = docEl.clientWidth;
 6             if (!clientWidth) return;
 7             if(clientWidth<=720){
 8                 docEl.style.fontSize = 100 * (clientWidth /720) + 'px';
 9             }else{
10                 docEl.style.fontSize = 100+'px'
11                     }
12                 };
13  
14             if (!doc.addEventListener) return;
15             win.addEventListener(resizeEvt, recalc, false);
16             doc.addEventListener('DOMContentLoaded', recalc, false);
17 })(document, window);

直接放到網頁裏就ok。

第三種也是大漠前輩總結的vw適配，其實rem適配初衷也是爲了使用vw，如今flexiblejs是時候退役了，下面開始（vue框架寫的，別的自行解決啦）

1首先vue-cli構建項目

2安裝PostCSS插件

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

安裝成功的話，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，一般vue-cli構建的就在根目錄下。

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 } 
    } 
}

目前出視覺設計稿，咱們都是使用750px寬度的，那麼100vw = 750px，即1vw = 7.5px。那麼咱們能夠根據設計圖上的px值直接轉換成對應的vw值。在實際擼碼過程，不須要進行任何的計算，直接在代碼中寫px，好比：

.carimg{
    width:370px;
    height: 280px;
}

編譯出的css

.carimg, .carimgdiv {
    width: 49.333vw;
    height: 37.333vw;
    content: "viewport-units-buggyfill; width: 49.333vw; height: 37.333vw";
}

大概就是這麼多，想詳細瞭解vw適配的話請去下邊的連接

https://www.w3cplus.com/mobile/vw-layout-in-vue.html