REM 实现自适应布局 | 适配

| rem实现自适应布局

• 方案一：根据 px 转换 rem，设置 rem 单位

    // main.js 引入  
    // 屏幕适配
    (function(doc, win) {
        var docEl = doc.documentElement
        var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
        var recalc = function() {
            var clientWidth = docEl.clientWidth
            if (!clientWidth) return
            docEl.style.fontSize = 100 * (clientWidth / 375) + 'px'
        }
        if (!doc.addEventListener) return
        win.addEventListener(resizeEvt, recalc, false)
        doc.addEventListener('DOMContentLoaded', recalc, false)
    })(document, window)
  

• 方案二：设置 px 单位，动态计算实现 rem

  postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位 lib-flexible 用于设置 rem 基准值

    npm i amfe-flexible -S   
    npm i postcss-pxtorem -D
    import 'amfe-flexible'     // 在 src\main.js 中引入 lib-flexible
  

    // postcss.config.js
    // 例如页面元素设置宽度 375px，在浏览器中会自动转换成 10 rem
    module.exports = {
      plugins: {
        'postcss-pxtorem': {
          rootValue: 37.5, // 换算的基数(设计图750的根字体为75)
          propList: ['*'],
        },
      },
    };
  

  除了 postcss-pxtorem，也可以使用 px2rem-loader 自动将px转换rem

    // cnpm intall px2rem-loader
    // 在 cssLoaders 方法内添加下列代码
    const px2remLoader = {
        loader: 'px2rem-loader',
        options: {
        remUnit: 64 //设计稿宽度/10
        }
    // 将 cssLoaders 方法内的generateLoaders的方法内的 loaders 变量添加 px2remLoader
    const loaders = options.usePostCSS
    ? [cssLoader, postcssLoader, px2remLoader, lessLoader ]
    : [cssLoader, px2remLoader, lessLoader ]
  

报错 Error: PostCSS plugin postcss-pxtorem requires PostCSS 8. 解决：npm install postcss-pxtorem@5.0.0 -D