快捷導(dǎo)航

vue3如何使用postcss-px-to-viewport適配屏幕

更新時(shí)間：2023年03月29日 09:39:06 作者：王天平·Jason Wong

這篇文章主要介紹了vue3如何使用postcss-px-to-viewport適配屏幕問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

因?yàn)榧夹g(shù)總是更新迭代，大多數(shù)博主都沒有習(xí)慣寫上自己的配置，總是把一段自認(rèn)為可以的配置貼出來(lái)，很多時(shí)候看了不僅誤人子弟，還耽誤很多開發(fā)時(shí)間，我，致力于做一個(gè)負(fù)責(zé)人的博主，都會(huì)貼出配置和使用環(huán)境，方便大家做參考。

使用環(huán)境

名稱	版本
vue	3.2.13
vue-cli	5.x
webpack	5.x
nodejs	16.15
postcss-px-to-viewport	^1.1.1

安裝

npm install postcss-px-to-viewport --save-dev
yarn add postcss-px-to-viewport --save-dev
pnpm add postcss-px-to-viewport --save-dev

如果devserver正在運(yùn)行，安裝完成以后記得重啟devserver。

配置

在項(xiàng)目根目錄下創(chuàng)建 postcss.config.js 文件，并填入一下內(nèi)容：

module.exports = {
  plugins: {
    // ...
    'postcss-px-to-viewport': {
      // options
      unitToConvert: "px",
      viewportWidth: 1920,
      viewportHeight:1080,
      unitPrecision: 3,
      propList: [
        "*"
      ],
      viewportUnit: "vw",
      fontViewportUnit: "vw",
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: /(\/|\\)(node_modules)(\/|\\)/,
    }
  }
}

重新運(yùn)行，打開瀏覽器查看屬性值已經(jīng)變?yōu)関w計(jì)算，就是這么簡(jiǎn)單。

附上插件的github地址： https://github.com/evrone/postcss-px-to-viewport

項(xiàng)目	類型	描述
unitToConvert	(String)	unit to convert, by default, it is px.
viewportWidth	(Number)	The width of the viewport.
unitPrecision	(Number)	The decimal numbers to allow the vw units to grow to.
propList	(Array)	- The properties that can change from px to vw.
		-Values need to be exact matches.
		Use * at the start or end of a word. (['position'] will match background-position-y)
		Use ! to not match a property. Example: ['*', '!letter-spacing']
		Combine the "not" prefix with the other prefixes. Example: ['', '!font']
viewportUnit	(String)	Expected units.
fontViewportUnit	(String)	Expected units for font.
selectorBlackList	(Array)The selectors to ignore and leave as px.	If value is string, it checks to see if selector contains the string. ['body'] will match .body-class
selectorBlackList	(Array)The selectors to ignore and leave as px.	If value is regexp, it checks to see if the selector matches the regexp. [/^body$/] will match body but not .body
minPixelValue	(Number)	Set the minimum pixel value to replace.
mediaQuery	(Boolean)	replaces rules containing vw instead of adding fallbacks
exclude	(Regexp or Array of Regexp Ignore some files like 'node_modules')	If value is regexp, will ignore the matches files.
exclude		If value is array, the elements of the array are regexp.
include	(Regexp or Array of Regexp) If include is set, only matching files will be converted, for example, only files under src/mobile/ (include: /\/src\/mobile\//)	If value is array, the elements of the array are regexp.
include		If value is regexp, will ignore the matches files.
landscape	(Boolean)	Adds @media (orientation: landscape) with values converted via landscapeWidth.
landscapeUnit	(String)	Expected unit for landscape option
landscapeWidth	(Number)	Viewport width for landscape orientation.