Vant+postcss-pxtorem implements browser adaptation function

Vant+postcss-pxtorem implements browser adaptation function

Rem layout adaptation
The styles in Vant use px as the unit by default. If you need to use rem units, the following two tools are recommended:
postcss-pxtorem is a postcss plugin for converting units to rem
lib-flexible is used to set the rem base value
There's a surprise at the end!

1. npm installation

npm install postcss-pxtorem --save

2. Create a new .postcssrc.js and make the following changes

Note:
1. When the following comment code is turned on, an error message will appear when running the script. I don't know what it is for, but just comment it out.

module.exports = {
 "plugins": {
 	//"postcss-import": {},
  //"postcss-url": {},
  "autoprefixer": {
   browsers: ['Android >= 4.0', 'iOS >= 7']
  },
  "postcss-pxtorem": {
   "rootValue": 32,
   "propList": ["*"]
  }
 }
}

3. Create a new rem.js

const baseSize = 32
// Set rem function function setRem () {
 // The scaling ratio of the current page width relative to 750 width, which can be modified according to your needs.
 const scale = document.documentElement.clientWidth / 750
 // Set the font size of the root node of the page document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// Initialize setRem()
// Reset rem when changing window size
window.onresize = function () {
 setRem()
}

4. Introduce rem.js in main.js

import "./rem.js"

At this point, the browser adaptation of Vant+postcss-pxtorem is completed.
You can use px in the style and convert it into rem automatically.
Wait, don’t go yet! ! ! Sir.
Do you think this is the end? NO, there is another rem adaptation that is not based on postcss-pxtorem.
Without further ado, let’s get straight to the code.

5. Create a new rem.js and introduce it in main.js

(function (doc, win) {
 var docEl = doc.documentElement
 var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
 var recalc = function () {
  var clientWidth = docEl.clientWidth
  if (!clientWidth) return
  if (parseInt(20 * (clientWidth / 320)) > 35) {
   docEl.style.fontSize = 35 + 'px'
  } else {
   docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'
  }
 }
 if (!doc.addEventListener) return
 win.addEventListener(resizeEvt, recalc, false)
 doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

import "./rem.js"

6. Add style global variables and use them

// The scaling ratio of the current page width relative to 750 width, which can be modified according to your needs.
$rem: (640/750)/40;
body{
	width: $rem * 24rem;
}

This is the end of this article about Vant+postcss-pxtorem to achieve browser adaptation. For more relevant Vant+postcss-pxtorem adaptation content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Detailed application of rem and postcss-pxtorem in Vue
  • About the issue of vue using postcss-pxtorem for mobile adaptation
  • Specific method of using postcss-pxtorem in vue3.0
  • Solve the pitfalls of using the Vant framework to do H5 (pull down to refresh, pull up to load, etc.)
  • Use Vant to complete the Dialog pop-up case

<<:  The implementation principle of Mysql master-slave synchronization

>>:  How to install JDK8 on Windows

Recommend

Solution to the root password login problem in MySQL 5.7

After I found that the previous article solved th...

How to install MySQL and MariaDB in Docker

Relationship between MySQL and MariaDB MariaDB da...

MySQL 8.0.11 installation tutorial with pictures and text

There are many tutorials on the Internet, and the...

Detailed explanation of MySQL database Event scheduled execution tasks

1. Background As the project's business conti...

Enabling and configuring MySQL slow query log

Introduction MySQL slow query log is an important...

MySQL learning to create and operate databases and table DDL for beginners

Table of contents 1. Operate the database 1.1 Cre...

Some settings of Div about border and transparency

frame: Style=”border-style:solid;border-width:5px;...

Node.js file copying, folder creation and other related operations

NodeJS copies the files: Generally, the copy oper...

MySQL 8.0.18 Installation Configuration Optimization Tutorial

Mysql installation, configuration, and optimizati...

Complete example of vue polling request solution

Understanding of polling In fact, the focus of po...

Linux ssh server configuration code example

Use the following terminal command to install the...

Pure CSS to achieve three-dimensional picture placement effect example code

1. Percentage basis for element width/height/padd...

Some references about colors in HTML

In HTML, colors are represented in two ways. One i...