快捷導(dǎo)航

從零開(kāi)始在vue-cli4配置自適應(yīng)vw布局的實(shí)現(xiàn)

更新時(shí)間：2020年06月08日 14:47:39 作者：MicahZJ

這篇文章主要介紹了從零開(kāi)始在vue-cli4配置自適應(yīng)vw布局，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

簡(jiǎn)介

viewportWidth也是vw布局從配置上來(lái)說(shuō)比rem布局簡(jiǎn)潔了很多，bu需要配置安裝lib，也不需要增加一個(gè)rem.js文件

簡(jiǎn)稱拎包使用

安裝包

npm install postcss-px-to-viewport -D

或者

yarn add postcss-px-to-viewport -D

配置移動(dòng)端

在vue.config.js中找到loaderOptions，如果沒(méi)有的話需要在css屬性下增加postcss

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

效果

不同型號(hào)下，我們看到字體大小都會(huì)跟著改變

配置pc端

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

效果

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

參考資料

vue-cli 中使用 postcss-px-to-viewport 插件實(shí)現(xiàn)移動(dòng)端自適應(yīng)
Vue(vue4.0)項(xiàng)目中，使用響應(yīng)式布局插件postcss-px-to-viewport

到此這篇關(guān)于從零開(kāi)始在vue-cli4配置自適應(yīng)vw布局的文章就介紹到這了,更多相關(guān)從零開(kāi)始在vue-cli4配置自適應(yīng)vw布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: