项目中屏幕适配 – 源码巴士

一、vw和vh适配方案

按照设计稿的尺寸，将px按比例计算转为vw和vh
转换公式如下：

假设设计稿尺寸为1820*1080（做之前一定问清楚ui设计稿的尺寸）
即：
网页宽度=1920px
网页高度=1080px

我们都知道
网页宽度=100vw
网页高度=100vh

所以，在1920*1080px的屏幕分辨率下
19220px=100vw
1080px=100vh

这样一来，以一个宽300px和200px的div来说，其所占的宽高，以vw和vh为单位，计算方式如下：
vwDiv = （ 300px / 1920px ）* 100vw
vhDiv = （ 200px / 1080px ）* 100vw
所以，就在1920*1080的屏幕分辨率下，计算出单个div的宽高
当屏幕放大或者缩小时，div函数i一vw和vh作为宽高的，就会自动适应不同分辨率的屏幕

所以，我们每次写CSS时转换一下就好了，但是用计算器很慢，所以，我们要借助scss的函数来帮助我们计算

二、vh和vw适配的实行

1.安装scss

npm install sass@1.26.5 sass-loader@8.0.2 --save

2.封装计算工具函数

在src/styles下新建一个utils.scss文件，定义好设计稿的宽度和高度两个变量
在这里使用scss内置的math.div函数，定义两个vw和vh的计算函数
我们传入具体的像素值，其帮我们自动计算出vw和vh的值

utils.scss

//使用scss的math函数，https://sass-lang.com/documentation/breaking-changes/slash-div
@use "sass:math"; 


//默认设计稿的宽度
$designWidth:1920;
//默认设计稿的高度
$designHeight:1080;

//px转为vw的函数
@function vw($px) {
  @return math.div($px , $designWidth) * 100vw;
}

//px转为vh的函数
@function vh($px) {  
  @return math.div($px , $designHeight) * 100vh;
}

3.路径配置全局使用

这里使用的是vue2.6和vue-clii3搭建的vue项目，所以只需要在vue.config.js里配置一下utils.scss的路径，就可以全局使用了

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports={
	publicPath: '', 
	configureWebpack: {
	  name: "app name",
	  resolve: {
	    alias: {
	      '@': resolve('src')
	    }
	  }
	},
	css:{
            //全局配置utils.scss,详细配置参考vue-cli官网
            loaderOptions:{
                sass:{
                     prependData:`@import "@/styles/utils.scss";`
                }
            }
	}
}

4.在vue文件中使用

<template>
	<div class="box">			
	</div>
</template>

<script>
    export default{
        name: "Box",

    }
</script>

<style lang="scss" scoped="scoped">
    /* 
     直接使用vw和vh函数，将像素值传进去，得到的就是具体的vw vh单位		 
     */

    .box{
        width: vw(300);
        height: vh(100);
        font-size: vh(16);
        background-color: black;
        margin-left: vw(10);
        margin-top: vh(10);
        border: vh(2) solid red;
    }
</style>

三、定义js样式处理函数去进行字体大小的适配

写在vue的原型上，全局的，通过this.getFontSize()去调用适配字体大小

Vue.prototype.getFontSize = (size,defalteWidth = 1920) => {
 let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
  if (!clientWidth) return size;
  let scale = (clientWidth / defalteWidth);
  return Number((size*scale).toFixed(3));
}

如果不是vue项目，可以在js文件中写方法，引入到对应页面的js中

let fitChartSize = (size,defalteWidth = 1920) => {
  let clientWidth =                     window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
  if (!clientWidth) return size;
  let scale = (clientWidth / defalteWidth);
  return Number((size*scale).toFixed(3));
}

原文链接：https://blog.csdn.net/slom_fxt/article/details/126758282