适配的几种方法

一、移动端适配

1、rem: 页面加载的时候动态计算

首先要知道rem是怎么用的，它是根据根元素大小来计算1rem到底等于多少px，如果根元素为100px，那么1rem=100px，2rem=200px；

模拟场景：设计师的设计稿假设为750px；

假设我们现在有两个设备，一个设备的宽度就是750px，并且我给这个宽度为750px设备的根元素设置为100px,这样1rem就等于100px了。

/ *
  * 如下当前设计稿为750，如果设备也是750的分辨率的话 那1rem = 100px;
* /
function remSelfAdaption() { // 自适应
   // 在当前设计稿大小下使根字体大小1rem = 100px，方便计算
   const size = 100; 
   // 设计稿大小
   const maxWidth = 750; 
   // 通过当前设备的分辨率计算与设计稿的大小比例
   const r = document.documentElement.clientWidth / maxWidth;
   let scale = r; 
   if (r >= 1) { // 当前设备分辨率超过750都以750的大小展示
     scale = 1;
   } else if (r <= 0.5) { // 当前分辨率低于设计稿一半都以0.5来计算根字体大小
     scale = 0.5;
   }
   document.documentElement.style.fontSize = `${scale * size}px`;
}

PC端适配

使用sass以及vw/vh来计算

// 创建一个variables.scss文件
// $baseWidth -- 设计稿的宽度 $baseHeight -- 设计稿的高度
$baseWidth: 1920 !default;
$baseHeight: 1080 !default;

@function calcvw($px) {
  @return ($px / $baseWidth) * 100vw;
}

@function calcvh($px) {
  @return ($px / $baseHeight) * 100vh;
}

vue调用sass的全局方法配置

// 添加在vue.config.js文件里
module.exports = {
    css: {
        loaderOptions: {
            // 给 sass-loader 传递选项
            sass: {
                // @/ 是 src/ 的别名
                prependData: `@import '~@/style/variables.scss';` //新版本
                // 旧版本  data: `
                // @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);
    	// 引入全局sass文件
    	const oneOfsMap = config.module.rule('scss').oneOfs.store;
    	oneOfsMap.forEach((item) => {
      		item
        	.use('sass-resources-loader')
        	.loader('sass-resources-loader')
        	.options({
          	// 引入多个全局sass文件
          	resources: ['./src/styles/variables.scss'],
        	})
        	.end();
    	});
  	},
}