PC端網頁隨屏幕大小自適應

使用 postcss-px-to-viewport 適配

1. 安裝插件 postcss-px-to-viewport

npm install postcss-px-to-viewport --save-dev

2. 配置postcss-px-to-viewport
   • 使用 postcss.config.js單獨文件進行配置
     • 新建postcss.config.js
     • 寫入配置

module.exports = {
  plugins: {
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 默認值`px`，需要轉換的單位
      viewportWidth: 1920, // 視窗的寬度,對應設計稿寬度
      // viewportHeight: 667, // 視窗的高度, 根據375設備的寬度來指定，一般是667，也可不配置
      unitPrecision: 6, // 指定`px`轉換為視窗單位值的小數位數
      propList: ["*"], // 轉化為vw的屬性列表  propList: ["*","!letter-spacing"],這表示：所有css屬性的屬性的單位都進行轉化，除了letter-spacing的
      viewportUnit: "vw", // 指定需要轉換成視窗單位
      fontViewportUnit: "vw", // 字體使用的視窗單位
      selectorBlaskList: [".ignore-"], // 指定不需要轉換為視窗單位的類 selectorBlackList: ['wrap'],它表示形如wrap,my-wrap,wrapper這樣的類名的單位，都不會被轉換
      mediaQuery: false, // 允許在媒體查詢中轉換`px`
      minPixelValue: 1, // 小於或等於`1px`時不轉換為視窗單位
      replace: true, // 是否直接更換屬性值而不添加備用屬性
      landscape: false, // 是否處理橫屏情況 是否添加根據landscapeWidth生成的媒體查詢條件 @media (orientation: landscape)
      // exclude: [/node_modules/], // 忽略某些文件夾下的文件或特定文件 用正則做目錄名匹配
      // landscapeUnit: "vw", // 橫屏時使用的單位
      // landscapeWidth: 1134 // 橫屏時使用的視窗寬度
    },
  },
};

• 在vue.config.js中進行配置

css: {
    extract: IS_PROD, //  是否使用css分離插件 ExtractTextPlugin,是否將組件中的 CSS 提取至一個獨立的 CSS 文件中 (而不是動態注入到 JavaScript 中的 inline 代碼)。
    requireModuleExtension: true, // 啟用 CSS modules for all css / pre-processor files.
    sourceMap: false,
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-px-to-viewport")({
            unitToConvert: "px", // 默認值`px`，需要轉換的單位
            viewportWidth: 1920, // 視窗的寬度,對應設計稿寬度
            // viewportHeight: 667, // 視窗的高度, 根據375設備的寬度來指定，一般是667，也可不配置
            unitPrecision: 6, // 指定`px`轉換為視窗單位值的小數位數
            propList: ["*"], // 轉化為vw的屬性列表  propList: ["*","!letter-spacing"],這表示：所有css屬性的屬性的單位都進行轉化，除了letter-spacing的
            viewportUnit: "vw", // 指定需要轉換成視窗單位
            fontViewportUnit: "vw", // 字體使用的視窗單位
            selectorBlaskList: [".ignore-"], // 指定不需要轉換為視窗單位的類 selectorBlackList: ['wrap'],它表示形如wrap,my-wrap,wrapper這樣的類名的單位，都不會被轉換
            mediaQuery: false, // 允許在媒體查詢中轉換`px`
            minPixelValue: 1, // 小於或等於`1px`時不轉換為視窗單位
            replace: true, // 是否直接更換屬性值而不添加備用屬性
            landscape: false, // 是否處理橫屏情況 是否添加根據landscapeWidth生成的媒體查詢條件 @media (orientation: landscape)
            // exclude: [/node_modules/], // 忽略某些文件夾下的文件或特定文件 用正則做目錄名匹配
            // landscapeUnit: "vw", // 橫屏時使用的單位
            // landscapeWidth: 1134 // 橫屏時使用的視窗寬度
          })
        ]
      },
      scss: {
        // 向全局sass樣式傳入共享的全局變量,注入 `sass` 的 `mixin` `variables` 到全局,
        // 詳情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
        //  sass 版本 9 中使用 additionalData ，版本 8 中使用 prependData
        prependData: `
          @import "@assets/css/mixin.scss";
          @import "@assets/css/variables.scss";
          `
      }
    }
  },

vue2項目中使用 mixin配合sacle縮放實現自適應

1. css樣式文件

#app{
  width: 100%;
  height: 100%;
  position: relative;
  overflow-x: hidden;
  #index{
    position: absolute;
    width: 1920px; // 設計稿的寬度
    min-height: 100%;
    top: 0;
    left: 0;
    transform-origin: 0 0;
  }
}

2. mixinDraw.js 文件

/* 屏幕適配 mixin 函數 */

// * 設計稿尺寸（px）
const baseWidth = 1920

export default {
  data() {
    return {
      // * 定時函數
      drawTiming: null
    }
  },
  mounted () {
    // 加載后先計算一遍縮放比例
    this.calcRate()
    // 生成一個監聽器：窗口發生變化從新計算計算一遍縮放比例
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    calcRate () {
      // 拿到整個頁面元素
      const appRef = this.$refs.zoom
      // 如果沒有值就結束
      if (!appRef) return
      // 當前寬高比
      const currentRate = parseFloat((window.innerWidth / baseWidth).toFixed(5))
      if (appRef) {
          appRef.style.transform = `scale(${currentRate}, ${currentRate})`
      }
    },
    resize () {
      // 先清除計時器
      clearTimeout(this.drawTiming)
      // 開啟計時器
      this.drawTiming = setTimeout(() => {
        this.calcRate()
      }, 200)
    }
  },
}

3. vue文件中使用

<template>
  <div ref="zoom" id="index">
  	
  </div>
</template>  
<script>
  import $ from '~/utils/tool'
  import mixinDraw from '@/utils/mixinDraw'

  export default {
    name: 'Index',
    data() {
      return {}
    },
    mixins:[mixinDraw],
}