1、媒体查询、最大宽度和最小宽度设置屏幕宽度范围
@media screen and (max-width: 1024px) {
html {
font-size: 42.66px !important;
}
}
@media screen and (min-width: 1920px) {
html {
font-size: 80px !important;
}
}
.large-screen-container {
min-width: 1024px;
max-width: 1920px;
min-height: 780px;
}
2、实现rem适配flexible.js
(function flexible(window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
function setBodyFontSize() {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
function setRemUnit() {
var rem = docEl.clientWidth / 24
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
3、main.js 引入flexible.js
import "@/utils/flexible";
4、安装postcss-plugin-px2rem
npm i postcss-plugin-px2rem --save
5、配置vue.config.js,将px转为rem
module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true,
},
postcss: {
plugins: [
require("postcss-plugin-px2rem")({
rootValue: 75,
mediaQuery: true,
exclude: /node_modules|public/
})
]
}
},
}
}
6、echarts适配
window.addEventListener("resize", function () {
chart && chart.resize();
});