项目中屏幕适配

一、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文件中使用

三、定义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));
}

注意：

        vue的scss对应的node.js的版本