vue-cli3に適応するPC側の大画面

準備：

vue-cli3 脚手架
flexible   插件 自适应插件
px2rem-loader  插件 将px转化为rem
postcss-loader postcss

ステップ1：プラグインをインストールする

npm i lib-flexible -S

npm i px2rem-loader -D

npm install --save-dev postcss-loader postcss

ステップ2：インストール後、main.jsにlib-flexibleを導入します

import 'lib-flexible'

手順3：vue.config.jsに構成を追加する

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

手順4：flexible.jsの幅を設定して、画面サイズに自動的に適応させ、flexible.jsファイルを変更します（flexible.jsをグローバルに検索します）

変更されたコード：

 function refreshRem(){
    
    
   var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
    
    
        width = width * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}

ステップ5：セットアップ後にプロジェクトを再起動し、効果を確認します

テストコード

<template>
  <div class="bg">
    <div class="header">
      大屏展示
    </div>
    <div class="body">
        <div class="box-full">
          占满全行
        </div>
        <div class="box-half">
          占行一半
        </div>
    </div>
  </div>
</template>

<script>
export default {
    
    
  name: "test",
  data() {
    
    
    return {
    
    
      name: `test`
    }
  },
  mounted() {
    
    
  },
  methods: {
    
    }
}
</script>

<style scoped>
  .bg{
    
    
    height: 100vh;
    width: 100vw;
    background: #efefef;
    /*overflow: hidden;*/
  }
  .header{
    
    
    height: 150px;
    text-align: center;
    font-size: 50px;
    line-height: 150px;
  }
  .body{
    
    
    height: calc(100% - 150px);
  }
  .body div{
    
    
    line-height: 150px;
    text-align: center;
    color: #fff;
    font-weight: bold;
  }
  .box-full {
    
    
    width: 1920px;
    height: 150px;
    background: red;
  }
  .box-half{
    
    
    width: 920px;
    height: 150px;
    background: green;
  }
</style>

拡張機能リファレンス：https：
//www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html