vue使用px2rem自動轉換rem

在這裏首先要說明下rem是什麼?css

rem是相對於根元素的字體大小的單位瀏覽器

px2rem安裝字體

yarn add px2rem
  • 1

在utils中增長px2remLoader 
utils中增長px2remLoader
看看裏面的配置項option是些什麼吧ui

Usage: px2rem [options] <file...>  Options: -h, --help output usage information -V, --version output the version number -u, --remUnit [value] set `rem` unit value (default: 75) // 是否生成不一樣dpr對應的樣式 -x, --threeVersion [value] whether to generate @1x, @2x and @3x version stylesheet (default: false) // 是否生成rem樣式表 -r, --remVersion [value] whether to generate rem version stylesheet (default: true) // 默認dpr -b, --baseDpr [value] set base device pixel ratio (default: 2) // px轉rem的精度 -p, --remPrecision [value] set rem value precision (default: 6) -o, --output [path] the output file dirname
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

說下這個remUnit是個什麼呢?就是1rem等於多少px的轉換單位,默認是75,我建議在750的設計稿時設置爲750,爲何?由於我只須要將RootFontSize設置爲瀏覽器寬度就好了 
這裏寫圖片描述
而後在寫樣式時,設計圖書是多少px就是多少px 
這裏寫圖片描述 
對應的效果 
這裏寫圖片描述 
默認是將全部的px轉換爲rem,對於那些不須要轉換的如1px borderspa

The raw stylesheet only contains @2x style, and if you 
don’t intend to transform the original value, eg: 1px border, add /no/ after the declaration 
intend to use px by force,eg: font-size, add /px/ after the declaration設計

就是說這樣作是不會轉rem的3d

border: 1px;/*no*/ font-size: 20px;/*px*/
  • 1
  • 2
  • 注意:對於習慣用stylus的去掉樣式結尾封號的,在這裏不能省略 ‘;’
相關文章
相關標籤/搜索