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

Simple example of adding and removing HTML nodes

Simple example of adding and removing HTML nodes ...

MySQL Series 3 Basics

Table of contents Tutorial Series 1. Introduction...

How to use Vue's idea to encapsulate a Storage

Table of contents background Function Purpose Ide...

Import csv file into mysql using navicat

This article shares the specific code for importi...

Do you know the common MySQL design errors?

Thanks to the development of the Internet, we can...

Analysis of the reasons why MySQL's index system uses B+ tree

Table of contents 1. What is an index? 2. Why do ...

Example code for converting html table data to Json format

The javascript function for converting <table&g...

WeChat applet uniapp realizes the left swipe to delete effect (complete code)

WeChat applet uniapp realizes the left swipe to d...

A detailed introduction to Tomcat directory structure

Open the decompressed directory of tomcat and you...

The whole process of IDEA integrating docker to deploy springboot project

Table of contents 1. IDEA downloads the docker pl...

Solution to the problem of eight hours difference in MySQL insertion time

Solve the problem of eight hours time difference ...

Vue uses plug-ins to cut pictures in proportion

This article shares the specific code of Vue usin...

DOM operation table example (DOM creates table)

1. Create a table using HTML tags: Copy code The ...

10 key differences between HTML5 and HTML4

HTML5 is the next version of the HTML standard. M...