Rem layout adaptation 1. npm installationnpm install postcss-pxtorem --save 2. Create a new .postcssrc.js and make the following changes Note: module.exports = { "plugins": { //"postcss-import": {}, //"postcss-url": {}, "autoprefixer": { browsers: ['Android >= 4.0', 'iOS >= 7'] }, "postcss-pxtorem": { "rootValue": 32, "propList": ["*"] } } } 3. Create a new rem.jsconst 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.jsimport "./rem.js" At this point, the browser adaptation of Vant+postcss-pxtorem is completed. 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:
|
<<: The implementation principle of Mysql master-slave synchronization
>>: How to install JDK8 on Windows
I'm currently learning about MySQL optimizati...
Table of contents 1. Synchronous AJAX 2. Asynchro...
Docker is really cool, especially because it'...
Table of contents 01 Problem Description 02 Solut...
tar backup system sudo tar cvpzf backup.tgz --exc...
An error message appears when MySQL is started in...
Table of contents Overview How to achieve it Spec...
Preface In MySQL, multi-table join query is a ver...
Written in advance: In the following steps, you n...
According to the methods of the masters, the caus...
Table of contents Preface Background data splicin...
1. Download and unzip to: /Users/xiechunping/Soft...
This article uses examples to describe the add, d...
Install SSHPASS For most recent operating systems...
1. Overview There are three ways to create a Dock...