Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

A CSS preprocessor was released on August 29, will you still only nest it? Article, lucky to be hung in the hot list for a few days 😁.

So far, the article has received 1,093 views, 58 likes and 34 favorites. In terms of data, it’s still quite impressive. So, I hastily draw a conclusion: and I CSS not how people have a lot of, do not admit, you can climb from the other end of the network cable to hit me 😶?

Little story

Big guy: What’s the difference between REM, EM and PX?

Rem is a relative unit based on the font size of the root element (default: 16px), em is a relative unit based on the font size of the parent element, and px is an absolute unit 😁.

Big guy: how to change PX to REM?

Me: 16px = 1rem, so convert the value / 16 to convert.

Big man: Then I calculate every place by hand?

I:… Otherwise?

A bad ending😫, thank you big guy finally tell me a key word PostCss, up posture.

Today’s topic is PostCss. website

PostCss

Official word: is a tool for converting CSS code with JavaScript tools and plug-ins.

Disclaimer: it is not a “preprocessor” because it does not have features like preprocessing and can be used in combination with preprocessors. It’s not really a “post-processor” either. Since postprocessors are generally considered to process CSS according to the CSS specification in the finished stylesheet, what they often do is add browser-private prefixes to CSS properties, but PostCSS is not limited to that. So, the best explanation is that it’s a processor (platform) with a variety of plugins that can be configured to suit your needs, even if you write your own PostCSS plugins.

Common plugins include Autoprefixer adding browser private prefixes and CSSNext allowing new CSS features that are not supported by browsers. If you are interested, look it up and use it.

Back to the subject, what plug-ins do YOU need to automate the transformation from PX to REM? The answer is postCSS-pxtorem.

The method is simple, the effect is amazing, but not fast to learn!!

Practical teaching

Practice is the sole criterion for testing truth [Vue for example].

The installation

npm i postcss-pxtorem --save

Configuration Postcss

Create the postcss.config.js file

module.exports = {
  plugins: {
    'postcss-pxtorem': {
       // The font size of the root element
       rootValue: 16.* indicates that all properties are enabled
       propList: [The '*'].// Convert to the number of decimal places reserved after REM
       unitPrecision: 5.// Styles less than 12px are not replaced with rem
       minPixelValue: 12.// Ignore some files and do not transform, for example I want to ignore the dependent UI framework
       exclude: ['node_modules']}}}Copy the code

After adding the file, try restarting the next project for the file to take effect

After the reboot, open the Chrome console and you will see that all px is automatically converted to REM 😁.

Font-size: 16px; font-size: 16px; “> < span style =” font-size: 16px;

In order to achieve different reference values corresponding to different device widths, we also need to create rem.js, the code is as follows. Core idea: based on the design definition of 1920 width, root element font size 16 as the benchmark, dynamic calculation of different screen under the different root element font size.

const baseSize = 16
function setRem() {
  const scale = document.documentElement.clientWidth / 1920
  document.documentElement.style.fontSize = baseSize * scale + 'px'
}
setRem()
window.onresize = function () {
  setRem()
}
Copy the code

Introduced in the main. Js

import './rem.js'
Copy the code

Online case address, drag and drop to feel it.

conclusion

Adaptive cognition has been stuck in the media query, only to find such a good plug-in platform!! Open the door to the new world (although check the information, found that there is already this thing, drag back…)

The combination of media query + PostCSS-PxtoREM is believed to solve most adaptive problems efficiently.

reference

PostCSS In Depth: What do you Need to know