一、移动端适配
1、rem: 页面加载的时候动态计算
首先要知道rem是怎么用的,它是根据根元素大小来计算1rem到底等于多少px,如果根元素为100px,那么1rem=100px,2rem=200px;
模拟场景:设计师的设计稿假设为750px;
假设我们现在有两个设备,一个设备的宽度就是750px,并且我给这个宽度为750px设备的根元素设置为100px,这样1rem就等于100px了。
/ *
* 如下当前设计稿为750,如果设备也是750的分辨率的话 那1rem = 100px;
* /
function remSelfAdaption() {
const size = 100;
const maxWidth = 750;
const r = document.documentElement.clientWidth / maxWidth;
let scale = r;
if (r >= 1) {
scale = 1;
} else if (r <= 0.5) {
scale = 0.5;
}
document.documentElement.style.fontSize = `${scale * size}px`;
}
PC端适配
使用sass以及vw/vh来计算
$baseWidth: 1920 !default;
$baseHeight: 1080 !default;
@function calcvw($px) {
@return ($px / $baseWidth) * 100vw;
}
@function calcvh($px) {
@return ($px / $baseHeight) * 100vh;
}
vue调用sass的全局方法配置
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import '~@/style/variables.scss';`
}
},
},
chainWebpack: (config) => {
const svgRule = config.module.rule('svg');
svgRule.use('vue-svg-loader').loader('vue-svg-loader');
externalConfig.chainWebpackExternals(config);
chainWebpackPlugins(config);
chainWebpackGloablConfig(config);
const oneOfsMap = config.module.rule('scss').oneOfs.store;
oneOfsMap.forEach((item) => {
item
.use('sass-resources-loader')
.loader('sass-resources-loader')
.options({
resources: ['./src/styles/variables.scss'],
})
.end();
});
},
}