vue pc 端和移動端響應式布局

源碼: https://gitee.com/hellojinjin/vue-flexible-layout.git
技術棧：

• postcss-px-to-viewport
• 媒體查詢
• flex 布局
• ui 組件(element-ui tabs 組件)

安裝 postcss-px-to-viewport

npm install postcss-px-to-viewport

根目錄新建 postcss.config.js 文件

//postcss.config.js文件
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // 需要轉換的單位，默認為"px"
      viewportWidth: 1920, // 設計稿的視口寬度
      unitPrecision: 5, // 單位轉換后保留的精度
      propList: ['*'], // 能轉化為vw的屬性列表
      viewportUnit: 'vw', // 希望使用的視口單位
      fontViewportUnit: 'vw', // 字體使用的視口單位
      selectorBlackList: [], // 需要忽略的CSS選擇器，不會轉為視口單位，使用原有的px等單位。
      minPixelValue: 1, // 設置最小的轉換數值，如果為1的話，只有大於1的值會被轉換
      mediaQuery: false, // 媒體查詢里的單位是否需要轉換單位
      replace: true, //  是否直接更換屬性值，而不添加備用屬性
      exclude: undefined, // 忽略某些文件夾下的文件或特定文件，例如 'node_modules' 下的文件
      include: undefined, // 如果設置了include，那將只有匹配到的文件才會被轉換
      landscape: false, // 是否添加根據 landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)
      landscapeUnit: 'vw', // 橫屏時使用的單位
      landscapeWidth: 1920, // 橫屏時使用的視口寬度
    },
  },
}

媒體查詢

/* assets/css/query.scss */
/* ##低分辨率的的手機 320-767px */
@media (min-width: 320px) and (max-width: 767px) {
  // css
}

//main.js
import '@/assets/css/query.scss'

說明

• 寬度字體等 px 為單位的屬性 通過postcss-px-to-viewport,可以轉換為 vw
• 布局變化可以通過媒體查詢定制 css

展示

pc 端:

移動端: