vue cli3項目的pc自適應布局_vw

前言

 

vw布局的頁面是等比改變的(因為vw將屏幕等分為100份,在初始設計時某元素占屏幕多少份,在其他屏幕上也是同樣的份數),比如我們在一個750px的屏幕寬度中使用了vw,當我們把屏幕寬度改為1920的時候,網頁的整個樣式包括字體都會等比放大.vw布局我用於大屏監控數據展示.

下圖是750屏幕寬度下的頁面

 

 下圖是1920屏幕寬度下的頁面

 

pc端配置 

1.安裝postcss-px-to-viewport插件,該插件的作用是把項目中style標簽內的px在編譯后轉化為vw.我們在項目中寫px,在執行npm run serve后查看界面會發現px已經轉化為vw了.

注意!對於非style標簽的px是無法轉化為vw的

npm install postcss-px-to-viewport -D

postcss-px-to-viewport轉化例子:

編輯器中用px

 在網頁控制台上變為了vw

 

 

 

2.在package.json同級下新建文件vue.config.js,在vue.config.js中配置如下

module.exports={
    css: {
        extract: false,//false表示開發環境,true表示生成環境
        sourceMap: false,
        loaderOptions: {
          postcss: {
            plugins: [
              require("postcss-px-to-viewport")({
                unitToConvert: "px",    // 需要轉換的單位，默認為"px"
                viewportWidth: 1920,   // 視窗的寬度，對應pc設計稿的寬度，一般是1920
                viewportHeight: 1080,// 視窗的高度，對應的是我們設計稿的高度,我做的是大屏監控,高度就是1080
                unitPrecision: 3,        // 單位轉換后保留的精度
                propList: [        // 能轉化為vw的屬性列表
                  "*"
                ],
                viewportUnit: "vw",        // 希望使用的視口單位
                fontViewportUnit: "vw",        // 字體使用的視口單位
                selectorBlackList: [],    // 需要忽略的CSS選擇器，不會轉為視口單位，使用原有的px等單位。
                minPixelValue: 1,        // 設置最小的轉換數值，如果為1的話，只有大於1的值會被轉換
                mediaQuery: false,        // 媒體查詢里的單位是否需要轉換單位
                replace: true,        // 是否直接更換屬性值，而不添加備用屬性
                exclude: /(\/|\\)(node_modules)(\/|\\)/,        // 忽略某些文件夾下的文件或特定文件，例如 'node_modules' 下的文件
              })
            ]
          }
        }
      }    
}

測試

<!-- 在helloworld文件中設置文字的大小為50px,當我們改變窗口寬度的時候,字體大小會跟着改變,就像前言中的例子 -->
<template>
  <div>
    dididi
    <hr>
    dididi2
    <hr>
    dididi3

    </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  components:{
  }
}

</script>

<style lang='scss' scoped>
div{
  font-size: 50px;
}
</style>

 

啟動npm run serve在改變窗口大小的時候,就能看到字體改變了