大屏页面适应不同分辨率的屏幕 transform

lunaliuuuuu

已于 2022-08-23 17:28:20 修改

阅读量574

点赞数

分类专栏：前端 js css 文章标签： javascript 前端大屏端

于 2022-08-23 17:22:40 首次发布

本文链接：https://blog.csdn.net/sinat_38546399/article/details/126489114

版权

前端同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

14 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

该博客探讨了如何通过JavaScript实现网页在不同分辨率显示器下的等比缩放，确保设计稿在1920*1080分辨率基础上能良好兼容其他PC显示器。主要方法是在页面加载时计算缩放比例，并使用CSS `transform` 属性对内容进行缩放，同时保持背景完整显示。

摘要由CSDN通过智能技术生成

思路：

设计稿为1920 * 1080，为兼容大部分PC显示器，对非1920分辨率的页面进行等比缩放

// 页面加载，缩放比例
scaleFunc() {
  this.scaleSize = document.body.clientWidth / 1903
  let scaleSize = this.scaleSize
  this.$refs["appRef"].style.transform = `scale(${scaleSize})`
  
},

mounted() {
  this.scaleFunc()
}

<div class="dashboard-wrap">
    <div class="app-container dashboard" id="index" ref="appRef">
    ...
    </div>
</div>

//样式
.dashboard-wrap {
  width: 100%;
  height: 100vh; // 要写高度，否则会显示缩放前的高度，分辨率小的时候，下面会有空白
  .dashboard {
	  width: 1903px; //滚动条宽度为17px，所以为1903px
	  padding: 0;
	  background: #011246;
	  transform-origin:0 0; //默认是垂直水平居中的，所以要以左上角为origin
 }
}