Mobile terminal adaptation makes px automatically converted to rem

Mobile terminal adaptation makes px automatically converted to rem
  • Install postcss-pxtorem first: npm install postcss-pxtorem --save-dev to install
  • Set the font-size of the root element dynamically based on the screen changes:

I wrote in vue's html

function setRem () {
        let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; //Detect the screen width of html and body document.documentElement.style.fontSize= htmlWidth/7.5 + 'px'; //Set the font-size to 100px on a 750 screen, so that the converted rem can see at a glance how many px it was before. You can choose the screen size for development, 3.2 with a screen width of 320 is also acceptable.
      }
      setRem();
      window.onresize = function () { //Browser size changes to trigger the window.onresize function, and then trigger the function setRem()
        setRem()
      }

- Then configure postcss-pxtorem in .postcssrc.js (.postcssrc.js is a file automatically generated by the scaffolding. After configuration, run npm run dev again):

The ones in the red circle need to be configured, and the rest are built-in:

'postcss-pxtorem': {
  rootValue: 100, //Root element size setting, that is, HTML font-size unitPrecision: 5, //How many decimal places to keep in rem propList: ['*'], //It is a list of properties that will be converted. Here it is set to ['*'] all. If you need to set only the border, you can write ['*', '!border*']  
  selectorBlackList: ['.radius'], // is an array for filtering CSS selectors. For example, if you set it to ['fs'], then for example, the fs-xl class name, the px style will not be converted. Regular expression writing is also supported here.
  replace: true, //I really don't know what this is used for. Anyone who knows please tell me mediaQuery: false, //Not valid in media queries (like @media screen) minPixelValue: 12 //Pixels less than 12 will not be converted}

After configuration, you can re-run npm run dev

200px width and height

200px becomes 2rem and the configured 100px is the font-size. rootValue is 100

The style of setting the class name to radius is not converted

Summarize

The above is the mobile adaptation that the editor introduced to you to automatically convert px to rem. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<:  Is the tag li a block-level element?

>>:  Apache Calcite code for dialect conversion

Recommend

How to use Nginx to handle cross-domain Vue development environment

1. Demand The local test domain name is the same ...

DOCTYPE Document Type Declaration (Must-Read for Web Page Lovers)

DOCTYPE DECLARATION At the top of every page you w...

The process of SSH service based on key authentication in Linux system

As we all know, SSH is currently the most reliabl...

English: A link tag will automatically complete href in IE

English: A link tag will automatically complete h...

The difference between char, varchar and text field types in MySQL

In MySQL, fields of char, varchar, and text types...

Solve the problem that IN subquery in MySQL will cause the index to be unusable

Today I saw a case study on MySQL IN subquery opt...

MySQL 8.0.2 offline installation and configuration method graphic tutorial

The offline installation method of MySQL_8.0.2 is...

Solution to inserting a form with a blank line above and below

I don't know if you have noticed when making a...

How to use CSS counters to beautify ordered lists of numbers

In web design, it is very important to use an org...

Writing Snake Game with Native JS

This article shares the specific code of writing ...

Detailed explanation of JS browser event model

Table of contents What is an event A Simple Examp...

How to start Vue project with M1 pro chip

Table of contents introduction Install Homebrew I...

Detailed explanation of Mysql's method of optimizing order by statement

In this article, we will learn about the optimiza...

MySQL 8.0.24 version installation and configuration method graphic tutorial

This article records the installation and configu...