Vue global adaptive size: use postcss-pxtorem method

Responsive design has become an integral part of modern front-end development. Especially with the popularity of mobile devices, it is particularly important to ensure that the display effect of web pages under various screen sizes.

As a popular front-end framework, responsive design can be easily implemented. And in this regard,postcss-pxtoremis a very useful tool that automatically converts px units to rem units for better adaptive layout.

This article will explain how to use it in a Vue projectpostcss-pxtoremImplement global adaptive size.

1. What is postcss-pxtorem?

postcss-pxtoremis a PostCSS plugin that converts px units in CSS files to rem units. In this way, the size of the element can be based on the root element (html) font size adaptively adjusts to achieve a more flexible layout.

For example, during development, you might write the following CSS code:

.box {
  width: 375px;
  height: 200px;
}

If you usepostcss-pxtorem, it will automatically convert px units to rem units, assuming the font size of the root element is 16px (i.e.1rem = 16px), then the converted code will be:

.box {
  width: 23.4375rem;
  height: 12.5rem;
}

In this way, when the screen size changes,remIt will be dynamically adjusted according to the change in the root font size, thereby achieving responsive effects.

2. Install postcss-pxtorem

First, you need to install it in your Vue projectpostcss-pxtoremPlugin. You can use npm or yarn for installation.

npm install postcss-pxtorem --save-dev

or:

yarn add postcss-pxtorem --dev

3. Configure postcss-pxtorem

After the installation is complete, you need toConfiguration in the filepostcss-pxtoremPlugin.

In Vue projects, there is usually aIf not, you can create one manually.

The file contents are as follows:

 = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16, // The font size of the root element is usually 16px      unitPrecision: 5, // Converted accuracy, that is, the number of digits retained after the decimal point      propList: ['*'], // All attributes are converted, supporting arrays, regulars and other methods      selectorBlackList: ['.no-rem'], // Exclude class names that do not convert      replace: true, // Whether to replace directly (default is true)      mediaQuery: false, // Whether to convert px in media query (default is false)      minPixelValue: 1 // Values ​​less than 1px are not converted    }
  }
}

Configuration item description:

• rootValue: The font size of the root element, usually 16px. If you arehtmlDifferent font sizes are used in the label, and the value can be modified according to actual conditions.
• unitPrecision: Accuracy during conversion, controlling the number of decimal places in the rem unit.
• propList: Define which properties need to be converted from px to rem,*Indicates all attributes.
• selectorBlackList: Exclude class names that do not need to be converted. A common practice is to exclude some class names that do not participate in responsive layout.
• replace: Whether to replace px directly with rem, the default istrue。
• mediaQuery: Whether to convert in media queries, it is usually not necessary to convert px in media queries.
• minPixelValue: px less than this value will not be converted to rem.

4. Use postcss-pxtorem in Vue project

After the configuration is completed,postcss-pxtoremThe px units in the CSS file are automatically converted to rem units at build time.

You can write CSS like you normally would, and the plugin will handle the transformations during the build process.

Example:

Suppose you are in the Vue projectThe following CSS is written in the file:

<style scoped>
.box {
  width: 375px;
  height: 200px;
  margin: 0 auto;
}
</style>

usepostcss-pxtoremAfter that, the built code will automatically convert px to rem:

.box {
  width: 23.4375rem;
  height:

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.