從零開始在vue-cli4配置自適應vw布局的實現

 更新時間:2020-06-14 00:01:04   作者:佚名   我要評論(0)

簡介
viewportWidth也是vw布局從配置上來說比rem布局簡潔了很多,bu需要配置安裝lib,也不需要增加一個rem.js文件
簡稱拎包使用
安裝包


npm install postcss-px-t

簡介

viewportWidth也是vw布局從配置上來說比rem布局簡潔了很多,bu需要配置安裝lib,也不需要增加一個rem.js文件

簡稱拎包使用

安裝包

npm install postcss-px-to-viewport -D

或者

yarn add postcss-px-to-viewport -D

配置移動端

在vue.config.js中找到loaderOptions,如果沒有的話需要在css屬性下增加postcss

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

效果

不同型號下,我們看到字體大小都會跟著改變

 

配置pc端

css: {
  extract: IS_PROD,
  sourceMap: false,
  loaderOptions: {
   postcss: {
    plugins: [
     require("postcss-px-to-viewport")({
      unitToConvert: "px",	// 需要轉換的單位,默認為"px"
      viewportWidth: 1920,  // 視窗的寬度,對應pc設計稿的寬度,一般是1920
      // viewportHeight: 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' 下的文件
     })
    ]
   }
  }
 },

效果

我們以字體為例,同樣可以看到字體在不同分辨率的情況下是不一樣大小的

參考資料

vue-cli 中使用 postcss-px-to-viewport 插件實現移動端自適應
Vue(vue4.0)項目中,使用響應式布局插件postcss-px-to-viewport

到此這篇關于從零開始在vue-cli4配置自適應vw布局的文章就介紹到這了,更多相關從零開始在vue-cli4配置自適應vw布局內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持腳本之家!

您可能感興趣的文章:

  • vue實現簡單瀑布流布局
  • vue 實現 rem 布局或vw 布局的方法
  • vue中使用rem布局代碼詳解
  • vue實現中部導航欄布局功能
  • vue中多路由表頭吸頂實現的幾種布局方式
  • vue.js template模板的使用(仿餓了么布局)
  • Vue.js實現網格列表布局轉換方法

相關文章

最新評論

买宝宝用品赚钱吗 重庆时时官网开奖结果 江苏省体彩七位数走势图30期 炒股最惨者真实的故事 2019广东快乐十分玩法规则 大乐透彩票开奖时间 组选包胆教程 湖北十一选五中奖 黑龙江11选五5开奖结果bl 湖北十一选五投注表 湖北快3形态走势图一定牛 澳大利亚股票指数 快乐双彩开奖结果今天 最稳的1分快三计划网 排三专家预测推荐号码 pk10在线精准计划包赢 今天排列5预测推荐号