postcss rem to responsive pixel

postcss-rem-to-bixel

مهم

تم نقل الكود إلى Sonofmagic/postcss-plugins ، هذا الريبو أرشفة!

البرنامج المساعد ل postcss الذي يولد وحدات PX أو RPX من وحدات REM.

• أعد الكتابة مع typescript واختبار جيد.
• TransformUnit دعم px و rpx !

إذا كنت لا تزال تستخدم [email protected] ، فيجب عليك استخدام [email protected] انظر الإصدار 6 التغييرات

ثَبَّتَ

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 لكتابة موقع الويب الخاص بك أو miniprogram ، فإن الوحدة الافتراضية هي 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

حجم خط الجذر.

توقيت

النوع: number

يُسمح للوحدات PX الدقيقة العشرية بالاستخدام ، الأرضية (التقريب إلى النصف).

Proplist

النوع: (string | RegExp)[]

الخصائص التي يمكن أن تتغير من REM إلى PX.

SelectorblackList

النوع: (string | RegExp)[]

المحددون لتجاهل وترك ريم.

يستبدل

النوع: boolean

يحل محل القواعد التي تحتوي على REMS بدلاً من إضافة احتياجات.

ميديكويري

النوع: boolean

السماح بتحويل REM في استفسارات الوسائط.

minremvalue

النوع: number

اضبط الحد الأدنى لقيمة REM لاستبداله.

استبعاد

النوع: (string | RegExp)[] | ((filePath: string) => boolean)

مسار الملف لتجاهل وترك PX.

transformunit

النوع: '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 .