1. Adaptation mode
The adaptation scheme adopts REM layout, adjusts the font size of the root element HTML according to the different screen resolution, so that the width and height of each element can automatically change and adapt to different screens
2. Use the postCSS-px2REM-exclude plug-in
Install postcss-px2REm-exclude –save-dev
Create the postcss.config.js file in the project root directory
module.exports = {
plugins: {
autoprefixer: {},
'postcss-px2rem-exclude': {
remUnit: 192
// exclude: /node_modules|folder_name/i,}}}Copy the code
3. Install flexible. Js (recommended to local)
Install command NPM install lib-flexible
(function(win, lib) {
var doc = win.document
var docEl = doc.documentElement
var metaEl = doc.querySelector('meta[name="viewport"]')
var flexibleEl = doc.querySelector('meta[name="flexible"]')
var dpr = 0
var scale = 0
var tid
var flexible = lib.flexible || (lib.flexible = {})
if (metaEl) {
console.warn('Scaling will be set based on existing meta tags')
var match = metaEl
.getAttribute('content')
// eslint-disable-next-line no-useless-escape
.match(/initial\-scale=([\d\.]+)/)
if (match) {
scale = parseFloat(match[1])
dpr = parseInt(1 / scale)
}
} else if (flexibleEl) {
var content = flexibleEl.getAttribute('content')
if (content) {
// eslint-disable-next-line no-useless-escape
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/)
// eslint-disable-next-line no-useless-escape
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/)
if (initialDpr) {
dpr = parseFloat(initialDpr[1])
scale = parseFloat((1 / dpr).toFixed(2))}if (maximumDpr) {
dpr = parseFloat(maximumDpr[1])
scale = parseFloat((1 / dpr).toFixed(2))}}}if(! dpr && ! scale) {// var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi)
var devicePixelRatio = win.devicePixelRatio
if (isIPhone) {
// On iOS, use 2x for 2 and 3 screens, and 1x for the rest
if (devicePixelRatio >= 3&& (! dpr || dpr >=3)) {
dpr = 3
} else if (devicePixelRatio >= 2&& (! dpr || dpr >=2)) {
dpr = 2
} else {
dpr = 1}}else {
// For other devices, use the same 1 times scheme
dpr = 1
}
scale = 1 / dpr
}
docEl.setAttribute('data-dpr', dpr)
if(! metaEl) { metaEl = doc.createElement('meta')
metaEl.setAttribute('name'.'viewport')
metaEl.setAttribute('content'.'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no')
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl)
} else {
var wrap = doc.createElement('div')
wrap.appendChild(metaEl)
doc.write(wrap.innerHTML)
}
}
function refreshRem() {
var width = docEl.getBoundingClientRect().width
if (width / dpr > 540) {
width = width * dpr
}
var rem = width / 10
docEl.style.fontSize = rem + 'px'
flexible.rem = win.rem = rem
}
win.addEventListener(
'resize'.function() {
clearTimeout(tid)
tid = setTimeout(refreshRem, 300)},false
)
win.addEventListener(
'pageshow'.function(e) {
if (e.persisted) {
clearTimeout(tid)
tid = setTimeout(refreshRem, 300)}},false
)
if (doc.readyState === 'complete') {
doc.body.style.fontSize = 12 * dpr + 'px'
} else {
doc.addEventListener(
'DOMContentLoaded'.function() {
doc.body.style.fontSize = 12 * dpr + 'px'
},
false
)
}
refreshRem()
flexible.dpr = win.dpr = dpr
flexible.refreshRem = refreshRem
flexible.rem2px = function(d) {
var val = parseFloat(d) * this.rem
if (typeof d === 'string' && d.match(/rem$/)) {
val += 'px'
}
return val
}
flexible.px2rem = function(d) {
var val = parseFloat(d) / this.rem
if (typeof d === 'string' && d.match(/px$/)) {
val += 'rem'
}
return val
}
})(window.window['lib'] | | (window['lib'] = {}))
Copy the code
The above code has been modified differently from the installed flexibility.js
function refreshRem() {
var width = docEl.getBoundingClientRect().width
if (width / dpr > 540) {
width = width * dpr
}
var rem = width / 10
docEl.style.fontSize = rem + 'px'
flexible.rem = win.rem = rem
}
Copy the code
Introduced in main.js
Import 'path /flexible.js'