postcss rem to responsive pixel

postcss-rem-zu-responsive Pixel

Wichtig

Der Code wurde in Sonofmagic/Postcss-Plugins verschoben, dieses Repo ist archiviert!

Ein Plugin für Postcss, das PX- oder RPX -Einheiten aus REM -Einheiten erzeugt.

• Schreiben Sie mit typescript um und gut getestet.
• Transformunit unterstützen px und rpx !

Wenn Sie weiterhin [email protected] verwenden, sollten Sie [email protected] verwenden

Installieren

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

Verwendung

Verwendung mit 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' ,
    } ) ,
  ] ,
}

Wenn Sie tailwindcss verwenden, um Ihre Website oder Ihr Miniprogramm zu schreiben, ist die Standardeinheit rem . Manchmal müssen wir unser Gerät in px oder rpx umwandeln.

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

Eingabe/Ausgabe

Bei den Standardeinstellungen werden nur Schriftarten in Bezug auf Schriftarten gezielt.

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

Optionen

Typ: Object | Null
Standard:

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

Wurzelvalue

Typ: number

Die Schriftgröße der Wurzelelement.

Unitprecision

Typ: number

Die Dezimalpräzisions -PX -Einheiten dürfen mit Boden verwendet werden (abgerundet auf die Hälfte).

Proplist

Typ: (string | RegExp)[]

Die Eigenschaften, die von REM zu PX wechseln können.

selectorBlacklist

Typ: (string | RegExp)[]

Die Selektoren ignorieren und gehen als REM.

ersetzen

Typ: boolean

Ersetzt Regeln, die REMs enthalten, anstatt Fallbacks hinzuzufügen.

Medienquerität

Typ: boolean

Lassen Sie die REM in Medienabfragen konvertiert werden.

Minremvalue

Typ: number

Stellen Sie den minimalen REM -Wert auf, den Sie ersetzen können.

ausschließen

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

Der Dateipfad ignoriert und bleibt als PX.

TransformUnit

Typ: 'px' | 'rpx'

Die Transformationsausgangseinheit.

deaktiviert

Typ: boolean

Wenn Sie dieses Plugin deaktivieren.

Eine Nachricht über das Ignorieren von Eigenschaften

Derzeit ist der einfachste Weg, eine einzelne Immobilie zu ignorieren, darin, ein Kapital in der Erklärung der REM -Einheit zu verwenden.

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

Vielen Dank an den Autor von postcss-rem-to-pixel und postcss-pxtorem .