本篇解决的是同分辨率，不同尺寸的屏幕自适应问题，以及开发者屏幕和正式版屏幕不适配的问题。

屏幕分辨率和尺寸

屏幕分辨率是指纵横向上的像素点数，单位是px。屏幕尺寸是指屏幕对角线的长短。分辨率决定的是屏幕的长宽比、清晰度，尺寸决定的是屏幕的大小。就是说，两块屏幕同样都是1920*1080的分辨率，但是屏幕大小不同，那么就一定存在一个系数，将小的屏幕同比放大到一定倍数，就会和大的屏幕相同。根据上面的理念，利用代码，求出这个系数，然后再通过css进行放大，就可以达到自适应的效果。

求放大系数

以3200*1200分辨率的屏幕为例，因为分辨率的单位是px，所以直接将页面大小设置为3200*1200px就可以，然后用当前屏幕的宽度除以3200就得到了放大系数，再利用transform的scale将页面放大就可以实现自适应了。这么做的好处是铺页面的时候直接根据设计稿的大小使用px做单位就可以了，不需要使用百分比或者rem等方法做自适应。vue代码为例：

<template>
  <div
    class="app-container"
    :style="`
    width:3200px;
    height:1200px;
    transform:scale(${scaleNum});
    -ms-transform:scale(${scaleNum});
    -moz-transform:scale(${scaleNum});
    -webkit-transform:scale(${scaleNum});
    -o-transform:scale(${scaleNum});
    transform-origin:left top;`"
  >
  </div>
</template>

<script>
export default {
  data() {
    return {
      scaleNum: 1,
    };
  },
  mounted() {
    let scale = () => {
      this.scaleNum = (window.innerWidth / 3200).toFixed(5);
    };
    scale();
    window.onresize = function () {
      scale();
    };
  },
};
</script>

开发者屏幕和正式屏幕的适配

代码中是用宽度计算的放大系数，那为什么不用高度呢？开发使用的主流屏幕大部分都是1920*1080的分辨率，而大屏大部分都是类似带鱼屏这种非常长的屏幕，用宽度计算，再开发屏幕上会显示成屏幕下方留白，可以一目了然的看到整个页面的布局，如果使用高度计算，会出现横向滚动条，不方便做开发。

使用宽度计算：

使用高度计算：