The H5 project uses the UI frame style to zoom out
Here’s an image to show how it looks:
For example, use the Vuant-UI framework
Note: the size of the UI design is 750, while the size of the Vuant-UI frame is 375, so when REM adaptation is performed, the size of the UI frame will be 750, resulting in the frame display will be doubled. So how to adapt?
1. Install UI framework:
# Vue 2Project to install Vant2: NPM I ant -S # Vue3Project to install Vant3: NPM I vant@next -sCopy the code
Global import (main.js) :
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
Copy the code
3. Rem adaptation of mobile terminal:
/ / install postcss - pxtorem
npm install postcss-pxtorem --save-dev
/ / lib - flexible installation
// #1 Install lib-flexible:
npm install lib-flexible --save-dev
// #2 import lib-flexible (import lib-flexible in main.js) :
import 'lib-flexible'
Copy the code
4, Postcss.config.js configuration:
module.exports = {
'plugins': {
// to edit target browsers: use "browserslist" field in package.json
'autoprefixer': {},
// Set the size of the UI frame
'postcss-pxtorem': {
rootValue: 75.// The number is based on the size of the drawing. For example, if the drawing size is 750, then the value is 750/10
propList: [The '*'].selectorBlackList: ['van'] // Since the rem size used by ant-UI is 375, it should be filtered out here.}}},Copy the code