vue remレイアウトまたはvwレイアウトを実現する方法

vue remレイアウトまたはvwレイアウトを実現する方法
一、remレイアウトの実現
いどうたんし

方法1、index.htmlまたはmain.jsに次のコードを追加します.

const setHtmlFontSize = () => {
  let deviceWidth =
    document.documentElement.clientWidth || document.body.clientWidth
  if (deviceWidth >= 750) {
    deviceWidth = 750
  }
  if (deviceWidth <= 320) {
    deviceWidth = 320
  }
  document.documentElement.style.fontSize = `${deviceWidth / 7.5}px`
}
window.onresize = setHtmlFontSize
setHtmlFontSize()

その後、cssを書く場合、px単位をremに置き換える限り、ここで設定する割合は100 px=1 remであり、例えば幅が100 pxの場合、直接1 remと書くことができる.
方法2、cli 3 lib-flexibleを使用し、pxをremプラグインに自動的に変換する
1、プラグインnpm install lib-flexible--saveをインストールする
npm install px 2 rem-loader--save-devまたはnpm install postcss-plugin-px 2 rem--save-dev(推奨)またはnpm install postcss-px 2 rem--save-devを選択
2.インレットファイルmainにプラグインを配置する.jsにlib-flexibleを導入

import 'lib-flexible/flexible'

3、3種類のプラグインのcli 3配置:vue.config.js中

//px2rem-loader  
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('css')
      .test(/\.css$/)
      .oneOf('vue')
      .resourceQuery(/\?vue/)
      .use('px2rem')
      .loader('px2rem-loader')
      .options({
        remUnit: 75
      })
  }
}

//postcss-plugin-px2rem
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-plugin-px2rem')({
            rootValue: 75, //    ，   100  ，              1rem 50px,               px         px 。
            // unitPrecision: 5, //  REM           。
            //propWhiteList: [],  //         ，                。
            // propBlackList: [], //   
            exclude: /(node_module)/, //  false，  （reg）                 ，  /(node_module)\/      UI    px    rem，          
            // selectorBlackList: [], //       px    
            // ignoreIdentifier: false,  //（boolean/string）         ，  ignoreidentifier ，replace      true。
            // replace: true, // （   ）    REM   ，       。
            mediaQuery: false, //（   ）          px。
            minPixelValue: 3 //           (3px   rem)。    0
          })
        ]
      }
    }
  }
}

//postcss-px2rem  
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 37.5 //    10     ，      px  rem       
          })
        ]
      }
    }
  }
}

二、cli 3実現vwレイアウト
vwはViewportウィンドウに基づく長さ単位
vw:Viewport's widthの略で、1 vwはwindowに等しい.innerWidthの1%vh:vwと似ていて、Viewport's heightの略で、1 vhはwindowに等しい.innerHeihgtの1%vmin:vminの値は、現在のvwとvhの値が小さいvmax:vmaxの値は、現在のvwとvhの値が大きい値です.
1.インストールカード(pxをvwに直接変換可能)npm i postcss-px-to-viewport-D 2、vue.config.js中

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px-to-viewport')({
            viewportWidth: 750, //    ，             ；
            viewportHeight: 1334, //    ，         ；
            unitPrecision: 3, //       ，3    3   ；
            viewportUnit: 'vw', //         ，     vw；
            selectorBlackList: ['.ignore', '.hairlines'], //        ，              ；
            minPixelValue: 1, //     ，           ；
            mediaQuery: false //            。
          })
        ]
      }
    }
  }
}