大屏适配的方案

方案一：rem单位+动态设置html的fontsize

1. 引入lib_flexiable.js库
2. 将1980均分为24等份（PC端）/10等份（移动端），1rem = 80PX
3. 安装cssrem插件，将html的fontsize设置为80px
4. 写界面时将px转为rem单位

方案二：vw单位

1. 将设计稿宽度改为目标设计稿，以1920为例：vw design改为1920
2. cssrem插件将px转为vw

方案三：CSS3的scale函数

• 原则:默认情况下宽度比进行适配，超宽屏按照高度比进行适配；超宽屏记得让其居中（left:50%; translateX(-50%);）

1. 定义设计稿尺寸
2. 拿到当前设备的尺寸
3. 计算缩放比例（默认宽度比 currentX/targetX）
4. 开始缩放网页（超宽屏特殊处理：scaleRatio = currentY/targetY） 注意1：如何判别的超宽屏，就是当currentRatio > scaleRatio时，也就是当currentX / currentY > currentX / targetX 注意2：在css中指定缩放的原点在左上角利于调试

代码如下：

// 1.设计稿的尺寸
    let targetX = 1920
    let targetY = 1080
    let targetRatio = 16 / 9 // 宽高比率

    // 2.拿到当前设备(浏览器)的宽度
    let currentX = document.documentElement.clientWidth || document.body.clientWidth
    let currentY = document.documentElement.clientHeight || document.body.clientHeight
    //  1920 * 1080  -> 3840 * 2160

    // 3.计算缩放比例（默认的scaleRatio为当前设备宽度/设计稿宽度）
    let scaleRatio = currentX / targetX; // 参照宽度进行缩放 ( 默认情况 )
    let currentRatio = currentX / currentY // 宽高比率

    // 超宽屏
    if(currentRatio > targetRatio) {
      scaleRatio = currentY / targetY // 参照高度进行缩放
      document.body.style = `width:${targetX}px; height:${targetY}px;transform: scale(${scaleRatio}) translateX(-50%); left: 50%`
    } else {
      // 4.开始缩放网页
      document.body.style = `width:${targetX}px; height:${targetY}px; transform: scale(${scaleRatio})`
    }