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
During the development and debugging process, it ...
Table of contents 1. unzip command 1.1 Syntax 1.2...
Table of contents Install tinymce, tinymce ts, ti...
wedge Because the MySQL version installed on the ...
During the project optimization today, MySQL had ...
I won't say much nonsense, let's just loo...
Recent product testing found a problem that when ...
Table of contents Preface Background data splicin...
Earlier we talked about how to make a square with...
View the nginx configuration file path Through ng...
In web design, we often use arrows as decoration ...
In cells, light border colors can be defined indi...
Let me first explain why the text is not vertical...
Let's take a look at ufw (Uncomplicated Firew...
This article summarizes the implementation method...