Every rabbit has a big country dream

preface

Hope is a good thing, maybe the best of things. Look forward to tomorrow

1 introduction

Common Configuration Items

rootValue

// The root size is HTML // 1rem = 16px rootValue: 16Copy the code

propList

Rem propList: ['*', '! Font -*', '! Border ']Copy the code

selectorBlackList

// Omit body // default match body-* // use the re lock body selectorBlackList: [/^body$/],Copy the code

unitPrecision

UnitPrecision: 5Copy the code

2 use

The installation

npm install postcss-pxtorem -D
Copy the code

postcss.config.js

module.exports = { plugins: { autoprefixer: { overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']}, // 375px = 100% width, write px automatically rem processing You can use PX to write 'postcss-pxtorem': {rootValue: 37.5, // font-size keep PX // border keep PX propList: ['*', '!font-*', '!border'], } } }Copy the code

3 adapter

rem.scss

$vm_fontsize: 16; $vm_fontsize: 16; $vm_fontsize: 16; $vm_design: 750; 'postcss-pxtorem', 'postcss-pxtorem', @function pxtorem($px) {@return ($px / $vm_fontsize) * 1rem; } html { font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; @media Queries and (max-width: 320px) {font-size: 16px; ($vm_fontsize / ($vm_design / 2)) * 320px; } @media screen and (min-width: 540px) { font-size: ($vm_fontsize / ($vm_design / 2)) * 540px; }} body {min-width: 320px;}} body {min-width: 320px; max-width: 540px; }Copy the code

4. Pay attention to

1. Postcss-pxtorem is only responsible for conversion, not adaptation 2. Rem + VW + @media adaptation 3. Ensure that the rootValue is the same as the root size

The end of the

Go to bed earlier, dream earlier and wait for you

Good night ^_^

Refer to the link

  • Postcss – pxtorem document
  • Postcss-pxtorem plug-in configuration

Review past

  • Learn a Vue plugin (1) every day — Better scroll
  • Learn a VUE plugin (2) every day — vue-awesome-swiper
  • Learn a vUE plugin every day (3) — esLint + prettier + stylelint
  • Learn a VUE plugin (4) every day — the V-Viewer