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

Detailed explanation of data types and schema optimization in MySQL

I'm currently learning about MySQL optimizati...

How to track users with JS

Table of contents 1. Synchronous AJAX 2. Asynchro...

Using Docker Enterprise Edition to build your own private registry server

Docker is really cool, especially because it'...

Common repair methods for MySQL master-slave replication disconnection

Table of contents 01 Problem Description 02 Solut...

Detailed explanation of docker command to backup linux system

tar backup system sudo tar cvpzf backup.tgz --exc...

MySQL startup error InnoDB: Unable to lock/ibdata1 error

An error message appears when MySQL is started in...

How to implement an array lazy evaluation library in JavaScript

Table of contents Overview How to achieve it Spec...

Ubuntu 18.04 obtains root permissions and logs in as root user

Written in advance: In the following steps, you n...

Solution to docker suddenly not being accessible from the external network

According to the methods of the masters, the caus...

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

Table of contents Preface Background data splicin...

Tutorial on compiling and installing MySQL 5.7.17 from source code on Mac

1. Download and unzip to: /Users/xiechunping/Soft...

MySQL trigger trigger add, delete, modify and query operation example

This article uses examples to describe the add, d...

Detailed explanation of how to pass password to ssh/scp command in bash script

Install SSHPASS For most recent operating systems...