移動端自適應vw、vh、rem

vw+vh+rem

一、vw、vh

　　vw、vh是基於視口的布局方案，故這個meta元素的視口必須聲明。（視口寬度等於設備寬度，初始不縮放，用於解決頁面寬高自動適配屏幕）

 <meta name="viewport" content="width=device-width,initial-scale=1.0">

　　1vw等於設備寬度的1%，同理1vh等於設備高度的1%，百分比布局

　　px轉vw

　　https://developer.aliyun.com/mirror/npm/package/postcss-px-to-viewport

 

npm install postcss-px-to-viewport --save-dev

 

// postcss.config.js
module.exports = { plugins: { autoprefixer: {}, 'postcss-px-to-viewport': { viewportWidth: 375, // 視窗的寬度，對應的是我們設計稿的寬度，一般是750
      // viewportHeight: 1334, // 視窗的高度，根據750設備的寬度來指定，一般指定1334，也可以不配置
      unitPrecision: 3, // 指定`px`轉換為視窗單位值的小數位數（很多時候無法整除）
      viewportUnit: 'vw', // 指定需要轉換成的視窗單位，建議使用vw
      selectorBlackList: ['.ignore', '.hairlines'], // 指定不轉換為視窗單位的類，可以自定義，可以無限添加,建議定義一至兩個通用的類名
      minPixelValue: 1, // 小於或等於`1px`不轉換為視窗單位，你也可以設置為你想要的值
      mediaQuery: false // 允許在媒體查詢中轉換`px`
 }, 'postcss-viewport-units': { // 排除會產生警告的部份
      filterRule: rule => rule.nodes.findIndex(i => i.prop === 'content') === -1 }, cssnano: { preset: 'advanced', autoprefixer: false, // 和autoprefixer同樣具有autoprefixer，保留一個
      'postcss-zindex': false } } }

 

二、rem

　　相對單位，根據CSS的媒體查詢功能，更改html根字體大小，實現字體大小隨屏幕尺寸變化。

　　舉例：瀏覽器默認html的字體大小為16px，則1rem=16px

 

三、rem配置(方式1）

　　px自動轉換rem，postcss-pxtorem

　　github:https://github.com/cuth/postcss-pxtorem

npm install postcss-pxtorem -D

 　　自動轉換設置（vue-cli3）

// postcss.config.js
module.exports = { plugins: { autoprefixer: {}, 'autoprefixer': { browsers: ['Android >= 4.0', 'iOS >= 7'] }, 'postcss-pxtorem': { rootValue: 10,// 轉換1rem=10px
      propList: ['*'] } } }

 

四、rem配置(方式2）

　　更多詳情可參考：https://my.oschina.net/parchments/blog/1794335

　　1. lib-flexible，手淘開發，用於適配移動端的開源庫

　　安裝lib-flexible

　　  github:https://github.com/amfe/lib-flexible

npm install lib-flexible --save-dev npm install px2rem-loader --save-dev

　　

　　2. 引入（vue）

// main.js
import 'lib-flexible'

　　

　　3. 配置（vue-cli3.0）

// vue.config.js
module.exports = { css: { loaderOptions: { css: {}, postcss: { plugins: [ require('postcss-px2rem')({ // 以設計稿750為例， 750 / 10 = 75
                        remUnit: 75 }), ] } } }, };

 

　　4. 修改最大適配尺寸

　　依賴包中打開./node_modules/lib-flexible/flexible.js

// ./node_modules/lib-flexible/flexible.js  // 找到該方法，默認最大適配尺寸為540px，修改540為需要值，重新運行項目即可
   function refreshRem(){ var width = docEl.getBoundingClientRect().width; if (width / dpr > 540) { width = 540 * dpr; } var rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; }

 五、rem配置(方式3）rem.js

　　參考：https://www.jianshu.com/p/98ab31ed7018

　　 兩個參數分別是designWidth 和maxWidth，顧名思義，就是我們設計稿的寬度和我們設定的最大寬度

　　 main.js中引入rem.js(vue)

// rem.js
(function (designWidth, maxWidth) { var doc = document, win = window; var docEl = doc.documentElement; var tid; var rootItem, rootStyle; function refreshRem() { var width = docEl.getBoundingClientRect().width; console.log(width,"width",maxWidth,"maxWidth") if (!maxWidth) { maxWidth = 540; } ; if (width > maxWidth) { width = maxWidth; } //與淘寶做法不同，直接采用簡單的rem換算方法1rem=10px，與上面rootValue應該保持一致
        var rem = width * 10 / designWidth; //兼容UC開始
        rootStyle = "html{font-size:" + rem + 'px !important}'; rootItem = document.getElementById('rootsize') || document.createElement("style"); if (!document.getElementById('rootsize')) { document.getElementsByTagName("head")[0].appendChild(rootItem); rootItem.id = 'rootsize'; } if (rootItem.styleSheet) { rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle) } else { try { rootItem.innerHTML = rootStyle } catch (f) { rootItem.innerText = rootStyle } } //兼容UC結束
        docEl.style.fontSize = rem + "px"; }; refreshRem(); win.addEventListener("resize", function () { clearTimeout(tid); //防止執行兩次
        tid = setTimeout(refreshRem, 300); }, false); win.addEventListener("pageshow", function (e) { if (e.persisted) { // 瀏覽器后退的時候重新計算
 clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); // if (doc.readyState === "complete") {
    // doc.body.style.fontSize = "32px";
    // } else {
    // doc.addEventListener("DOMContentLoaded", function (e) {
    // doc.body.style.fontSize = "32px";
    // }, false);
    // }
})(375, 750);