vue remレイアウトやvwレイアウトを実現する方法

一、remレイアウトを実現する
移動端

<meta
 name="viewport"
 content="width=device-width, initial-scale=1, maximum-scale=1"
/>

方法1、index.または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と書くことができる。
方法二、cli 3はlib-flexibleとpxを自動的にremプラグインに変換する。
1、プラグインのインストール

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

または選択npm install postcss-plugin-px2rem --save-dev（ ）または選択npm install postcss-px2rem --save-dev2、プラグインの設定
エントランスファイルのmain.jsにlib-flexibleを導入します。import 'lib-flexible/flexible'3、3種類のプラグインのcli 3構成：
vue.co nfig.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.inner Widthの1%に等しいです。
vh：vwと似ています。Viewport's heightの略字です。1 vhはwindow.inner Heihgtの1%に等しいです。
vmin：vminの値は現在のvwとvhの中の小さい値です。
vmax:vmaxの値は現在のvwとvhの中の大きな値です。
1、プラグインをインストールする（直接pxをvwに変換することができます）npm i postcss-px-to-viewport -D2、vue.co nfig.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 //            。
     })
    ]
   }
  }
 }
}

締め括りをつける
以上は小编が皆さんに绍介したvueのremレイアウトやvwレイアウトを実现する方法です。皆さんに何かお聞きしたいことがあれば、メッセージをください。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。