前端页面在PC端不同分辨率屏幕的适配----比例缩放

通常UI提供PC端项目的设计稿尺寸都是1920*1080(16:9)的，但是电脑显示屏的分辨率是不固定的，所以按照这个固定像素做出来的前端页面在不同的显示屏上可能会出现页面显示不全或者是页面无法充满屏幕的情况。此时，“人美心善”的客户就会提出要求，要让页面充满屏幕。

--我常用的解决方法——比例缩放

上代码：

css

body{
  transform: scale(1,1);
  -ms-transform: scale(1,1); /* IE 9 */
  -webkit-transform: scale(1,1); /* Safari and Chrome */
  transform-origin: left top; /*设置左上角为缩放原点*/
}

js

selfAdaption(){
  this.windowHeight = document.documentElement.clientHeight
  this.windowWidth = document.documentElement.clientWidth
  let heightScale = this.windowHeight/1080
  let widthScale = this.windowWidth/1920
  $('body').css({
    "transform": `scale(${widthScale},${heightScale})`,
    "-ms-transform": `scale(${widthScale},${heightScale})`,
    "-webkit-transform": `scale(${widthScale},${heightScale})`,
  })
  window.onresize = () => { //屏幕尺寸改变时触发
    this.windowHeight = document.documentElement.clientHeight
    this.windowWidth = document.documentElement.clientWidth
    let heightScale = this.windowHeight / 1080
    let widthScale = this.windowWidth / 1920
    $('body').css({
      "transform": `scale(${widthScale},${heightScale})`,
      "-ms-transform": `scale(${widthScale},${heightScale})`,
      "-webkit-transform": `scale(${widthScale},${heightScale})`,
    })
  }
},

优点

1、此方法是通过在body标签上添加transform：scale（）样式实现的，所以页面的所有元素都会被缩放。
2、复杂程度相较于rem的方式更简便，只需考虑body标签的宽高即可

缺点

1、用此方法实现适配的页面在浏览器不能通过ctrl+滚轮缩放页面
2、如果屏幕实际的像素比与设计稿的像素比差别过大，页面会也会被拉伸的比较奇怪