postcss rem to responsive pixel

PostCSS-REM到響應像素

重要的

代碼已移至Sonofmagic/Postcss-Plugins，此存儲庫已存檔！

用於從REM單元生成PX或RPX單元的PostCSS插件。

• 用typescript重寫並經過良好的測試。
• Transformunit支持px和rpx ！

如果您仍然使用[email protected] ，則應使用[email protected]到響應[email protected]

安裝

npm i -D postcss-rem-to-responsive-pixel
yarn add -D postcss-rem-to-responsive-pixel
pnpm i -D postcss-rem-to-responsive-pixel

用法

與Postcss.config.js一起使用

 // postcss.config.js
module . exports = {
  plugins : [
    // for example
    // require('autoprefixer'),
    // require('tailwindcss'),
    require ( 'postcss-rem-to-responsive-pixel' ) ( {
      rootValue : 32 ,
      propList : [ '*' ] ,
      transformUnit : 'rpx' ,
    } ) ,
  ] ,
}

當您使用tailwindcss編寫您的網站或微圖時，默認單元為rem ，因此有時我們必須將單元轉換為px或rpx 。

 // postcss.config.js
module . exports = {
  plugins : [
    require ( 'tailwindcss' ) ,
    require ( 'postcss-rem-to-responsive-pixel' ) ( {
      rootValue : 32 ,
      propList : [ '*' ] ,
      transformUnit : 'rpx' ,
    } ) ,
  ] ,
} 

輸入/輸出

使用默認設置，僅針對字體相關的屬性。

 // input
h1 {
  margin : 0 0 20 px ;
  font-size : 2 rem ;
  line-height : 1.2 ;
  letter-spacing : 0.0625 rem ;
}

// output
h1 {
  margin : 0 0 20 px ;
  font-size : 64 rpx;
  line-height : 1.2 ;
  letter-spacing : 2 rpx;
}

選項

類型： Object | Null
預設:

 {
  rootValue : 16 ,
  unitPrecision : 5 ,
  selectorBlackList : [ ] ,
  propList : [ 'font' , 'font-size' , 'line-height' , 'letter-spacing' ] ,
  replace : true ,
  mediaQuery : false ,
  minRemValue : 0 ,
  exclude : [ / node_modules / i ] ,
  transformUnit : 'px' ,
  disabled : false
}

根價

類型： number

根元素字體大小。

Unitercision

類型： number

允許使用十進制精度PX單元，地板（向下舍入一半）。

預言

類型：（ (string | RegExp)[]

可以從REM變為PX的屬性。

SelectorBlackList

類型：（ (string | RegExp)[]

選擇者忽略並以REM離開。

代替

類型： boolean

替換包含REM的規則而不是添加後備。

MediaQuery

類型： boolean

允許REM在媒體查詢中轉換。

Minremvalue

類型： number

設置最小REM值以替換。

排除

類型：（ (string | RegExp)[] | ((filePath: string) => boolean)

忽略的文件路徑並以Px離開。

變換

類型： 'px' | 'rpx'

變換輸出單元。

禁用

類型： boolean

如果禁用此插件。

有關忽略屬性的消息

當前，忽略單個財產的最簡單方法是在REM單位聲明中使用資本。

// `rem` is converted to `px`
. convert {
  font-size : 1 rem ; // converted to 16px
}

// `Rem` or `REM` is ignored by `postcss-rem-to-pixel` but still accepted by browsers
. ignore {
  border : 1 rem solid; // ignored
  border-width : 2 rem ; // ignored
}

感謝postcss-rem-to-pixel和postcss-pxtorem的作者。