• 一、通用分辨率适配方案四
  • 1. 屏幕适配
  • 2. 封装计算函数

一、通用分辨率适配方案四

方案：vw 和 vh 适配方案 缺陷：

1. 无法突破浏览器 12px 的限制，需要通过缩放处理，或者拥有最小宽度、最小高度，滚动显示
2. 需要项目一开始就实行该方案，如果项目已经建设完成，则改造的工作量相当于重新写了一遍样式。

1. 屏幕适配

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

      假设设计稿尺寸为 1920*1080（做之前一定问清楚UI设计稿的尺寸）
      即：
      网页宽度 = 1920px
      网页高度 = 1080px
  
      我们都知道
      网页宽度 = 100vw
      网页宽度 = 100vh
      
      所以，在 1920 * 1080 px 的屏幕分辨率下，
      
      1920px = 100vw
      1080px = 100vh
      
      这样一来，以一个宽300 px 和200 px 的 div 来说，其作所占的宽高，以 vw 和 vh 为单位，计算方式如下:
      
      vwDiv = (300px / 1920px ) * 100vw
      vhDiv = (200px / 1080px ) * 100vh
      
      所以，就在 1920*1080 的屏幕分辨率下，计算出了单个div的宽高。        
      当屏幕放大或者缩小时，div还是以vw和vh作为宽高的，就会自动适应不同分辨率的屏幕

2. 封装计算函数

• 基于 less 封装【需要安装 less、less-loader】

• 计算函数