postcss rem to responsive pixel

PostCSSS-REM-to-responsive-pixel

Penting

Kode telah dipindahkan ke Sonofmagic/PostCSS-Plugins, repo ini diarsipkan!

Plugin untuk PostCS yang menghasilkan unit PX atau RPX dari unit REM.

• Tulis ulang dengan typescript dan diuji dengan baik.
• Transformunit mendukung px dan rpx !

Jika Anda masih menggunakan [email protected] , Anda harus menggunakan [email protected] lihat Versi 6 Breaking Changes

Memasang

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

Penggunaan

Gunakan dengan 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' ,
    } ) ,
  ] ,
}

Saat Anda menggunakan tailwindcss untuk menulis situs web atau miniprogram Anda, unit default adalah rem , jadi kadang -kadang kami harus mengubah unit kami menjadi px atau rpx .

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

Input/output

Dengan pengaturan default, hanya properti terkait font yang ditargetkan.

 // 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;
}

Opsi

Jenis: Object | Null
Bawaan:

 {
  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
}

RootValue

Jenis: number

Ukuran font elemen root.

Unit -Unit

Jenis: number

Unit PX presisi desimal diizinkan untuk digunakan, berlantai (membulatkan ke bawah setengah).

Proplist

Jenis: (string | RegExp)[]

Properti yang dapat berubah dari REM ke PX.

selectorblacklist

Jenis: (string | RegExp)[]

Para pemilih untuk diabaikan dan pergi sebagai REM.

mengganti

Jenis: boolean

menggantikan aturan yang berisi REMS alih -alih menambahkan fallback.

media

Jenis: boolean

Biarkan REM dikonversi dalam kueri media.

MinremValue

Jenis: number

Atur nilai REM minimum untuk diganti.

mengecualikan

Jenis: (string | RegExp)[] | ((filePath: string) => boolean)

Jalur file untuk diabaikan dan pergi sebagai px.

transformunit

Jenis: 'px' | 'rpx'

Unit output transformasi.

dengan disabilitas

Jenis: boolean

Jika nonaktifkan plugin ini.

Pesan tentang mengabaikan properti

Saat ini, cara termudah untuk memiliki properti tunggal yang diabaikan adalah dengan menggunakan modal dalam deklarasi unit 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
}

Terima kasih kepada penulis postcss-rem-to-pixel dan postcss-pxtorem .