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

How to compare two database table structures in mysql

During the development and debugging process, it ...

Detailed explanation of Linux command unzip

Table of contents 1. unzip command 1.1 Syntax 1.2...

Practice of using Tinymce rich text to customize toolbar buttons in Vue

Table of contents Install tinymce, tinymce ts, ti...

MySQL 5.7.30 Installation and Upgrade Issues Detailed Tutorial

wedge Because the MySQL version installed on the ...

Mysql: The user specified as a definer ('xxx@'%') does not exist solution

During the project optimization today, MySQL had ...

mySql SQL query operation on statistical quantity

I won't say much nonsense, let's just loo...

A brief discussion on the efficiency of MySQL subquery union and in

Recent product testing found a problem that when ...

avue-crud implementation example of multi-level complex dynamic header

Table of contents Preface Background data splicin...

How to view nginx configuration file path and resource file path

View the nginx configuration file path Through ng...

Code for implementing simple arrow icon using div+CSS in HTML

In web design, we often use arrows as decoration ...

Introduction to ufw firewall in Linux

Let's take a look at ufw (Uncomplicated Firew...

Html+css to achieve pure text and buttons with icons

This article summarizes the implementation method...