VUE：页面布局的自动缩放

前端-如此如此。

已于 2022-08-12 16:33:36 修改

阅读量7.3k

点赞数 4

分类专栏： JS CSS 文章标签： css javascript

于 2022-04-07 15:31:02 首次发布

本文链接：https://blog.csdn.net/weixin_44136505/article/details/124010537

版权

简介

了解了一下关于页面布局的自动缩放。

具体实现

情况一：页面固定宽高时

通过固定页面宽高，根据浏览器宽高对比计算，进行body的transform。
优缺点：可达到目的，但是若窗口比例不符合固定值比例，就会有空白区域。

// app.vue
// JS
const zoom = () => {
   
  let x = window.innerWidth / 1920 // 固定值
  let y = window.innerHeight / 1080 // 固定值
  let domBody = document.getElementsByTagName('body')[0]
  domBody.style.transform = `scale(${
     x}, ${
     y