vue如何页面缩小内容不缩小（vue项目网页自适应，等比例放大缩小）

        同样是  
  
  
  
  
  
  
  ，虽然标题写的vue项目适用 
  
  
  
  
  
  
  
 ，但其它前端框架应该也可以  
  
  
  
  
  
  
  。其它框架我没什么经验


 


 


 


 


 


 


 


，可以参考着看看 
 
 
 
 
 
 
 ，应该适用 
  
  
  
  
  
  
  
 。

        本文章不涉及第三方插件  
   
   
   
   
   
   
   
 ，纯js


 


 


 


 


 


 


 


。

        自适应这个问题

 

 

 

 

 

 

 

，老早以前就有一个解决方式
 

 

 

 

 

 

 

 ，css中的%                ，比如height:100%; width:100%;给主容器赋予该样式
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

，那主容器就可以自适应屏幕














，但里面的内容不会                        ，如果要里面的内容也自适应
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，那里面也得写%






















，但问题随之而来                ，font-size呢？

        %虽然现在依然有用
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，但现在的项目很多都有设计稿















，比如我接触比较多的数据大屏  
  
  
  
  
  
  
  ，这类网页 
  
  
  
  
  
  
  
 ，长宽比是固定的


 


 


 


 


 


 


 


，%无法解决字体自适应的问题 
 
 
 
 
 
 
 。熟悉rem的 
 
 
 
 
 
 
 ，可以用rem  
   
   
   
   
   
   
   
 ，这个单位类似于微信小程序的rpx

 

 

 

 

 

 

 

，算是自适应属性
 

 

 

 

 

 

 

 ，但我没用过                ，不讲
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

，今天的主角不是它  
   
   
   
   
   
   
   
 。

        接下来就是正文了

 

 

 

 

 

 

 

。在长宽比固定的情况下














，网页自适应                        ，其实就是将网页等比例放大或者缩小
 

 

 

 

 

 

 

 。我们提出一个 设想
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，在网页初始化的时候






















，正确地放大或者缩小网页                ，来适应屏幕；并在浏览器显示区域发生变化时
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，修改放大或者缩小的比例















，使网页始终能够适应屏幕                。

        放大和缩小  
  
  
  
  
  
  
  ，有什么现有的方法或者样式吗？有 
  
  
  
  
  
  
  
 ， css中的 zoom 以及 scale（）


 


 


 


 


 


 


 


，浅讲一下两个样式的不同之处：

zoom:

        1. 使用该样式的标签会等比例缩放
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

。zoom:0.5 （缩放50%） 
 
 
 
 
 
 
 ，zoom:2（放大两倍）














。

        2. 缩放的基准点在原容器的左上角（应该没记错  
   
   
   
   
   
   
   
 ，想证实的可以自己试试）

 

 

 

 

 

 

 

，意思就是
 

 

 

 

 

 

 

 ，使用zoom放大缩小                ，原容器的左上角作为原点不动
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

，然后边长放大缩小                        。在数学里的话














，差不多就是原点固定                        ，然后在第四象限放大缩小
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
。

        3. 火狐firefox不支持






















。

scale():

        1. 使用该样式的标签也会放大缩小
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，不过它可以让长宽独立放大缩小                。transform: scale(2, 2); （放大两倍）






















，transform: scale(0.5, 2); （水平方向缩放50%                ，垂直方向放大2倍）
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 。

        2. 缩放的基准点在原容器的中心
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，意思大概是以原容器中心为原点















，然后向一二三四象限扩张或收缩















。

        3. 火狐firefox支持  
  
  
  
  
  
  
  。

        对比下来  
  
  
  
  
  
  
  ，scale()优势明显 
  
  
  
  
  
  
  
 ，我们就用scale()


 


 


 


 


 


 


 


，它是css3的属性 
 
 
 
 
 
 
 ，我们不考虑什么兼容问题  
   
   
   
   
   
   
   
 ，现在还不支持css3的浏览器

 

 

 

 

 

 

 

，我都不稀罕用 
  
  
  
  
  
  
  
 。如果非要用zoom
 

 

 

 

 

 

 

 ，也可以                ，因为代码方面差不多


 


 


 


 


 


 


 


。

        既然上面的 设想 可以有方法实现
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

，现在就剩最后一个问题了














，缩放多少呢？

        场景假设：我们以设计稿 1920px*1080px为例                        ，但是现在我们的屏幕没有1920*1080
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，或者浏览器没有最大化






















，就占了屏幕的一半                ，这时候很可能浏览器长宽比连16:9都不是
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，我们可以宽度做基准















，高度来适应宽度（高度为基准  
  
  
  
  
  
  
  ，宽度适应高度也可以 
  
  
  
  
  
  
  
 ，看场景和具体需要） 
 
 
 
 
 
 
 。设计稿的宽度是1920px


 


 


 


 


 


 


 


，而浏览器可视宽度是 window.innerWidth 
 
 
 
 
 
 
 ，我们需要在浏览器可视范围内自适应缩放容器  
   
   
   
   
   
   
   
 ，也就是在 window.innerWidth 的宽度中来显示 1920px的东西

 

 

 

 

 

 

 

，那我们的 缩放比例 就是 window.innerWidth / 1920  
   
   
   
   
   
   
   
 。

        所有问题都解决了
 

 

 

 

 

 

 

 ，现在就来实现我们的设想

 

 

 

 

 

 

 

。下面我以scale()为例了
 

 

 

 

 

 

 

 。

        在网页初始化的时候                ，正确地放大或者缩小网页
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

，来适应屏幕                。翻译：mounted() 的时候scale()主容器
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

。

mounted() { var browerWidth = window.innerWidth; //浏览器可视宽度 var baseWidth = 1920; //设计稿宽度 var zoomValue = browerWidth / baseWidth; //缩放比例计算 document.getElementById("mainContainer").style.transform = "scale(" + zoomValue + "," + zoomValue + ")"; //mainContainer为主容器id }

        在浏览器显示区域发生变化时














，修改放大或者缩小的比例                        ，使网页始终能够适应屏幕














。翻译：窗口尺寸变化时
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，重新计算缩放比例






















，并重新scale()主容器                        。

window.onresize = function () { var browerWidth = window.innerWidth; var baseWidth = 1920; var zoomValue = browerWidth / baseWidth; document.getElementById("mainContainer").style.transform = "scale(" + zoomValue + "," + zoomValue + ")"; }

        整合一下：

mounted() { var browerWidth = window.innerWidth; //浏览器可视宽度 var baseWidth = 1920; //设计稿宽度 var zoomValue = browerWidth / baseWidth; //缩放比例计算 document.getElementById("mainContainer").style.transform = "scale(" + zoomValue + "," + zoomValue + ")"; //mainContainer为主容器id window.onresize = function () { //窗口尺寸变化时                ，重新计算和缩放 browerWidth = window.innerWidth; zoomValue = browerWidth / baseWidth; document.getElementById("mainContainer").style.transform = "scale(" + zoomValue + "," + zoomValue + ")"; } }

        到这里
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，自适应的内容已经结束















，但还不完美
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
。如果显示区域的比例不是16:9






















。两种情况：

        1. 宽度更大  
  
  
  
  
  
  
  ，高度为了适应宽度 
  
  
  
  
  
  
  
 ，会导致垂直方向显示不全


 


 


 


 


 


 


 


，需要上下滚动显示                。这个就改成以高度为基准
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 。上面的 场景假设 有提到















。

        2. 高度更大 
 
 
 
 
 
 
 ，或者使用了1的解决方法  
  
  
  
  
  
  
  。因为显示区域不是16:9  
   
   
   
   
   
   
   
 ，而设计稿是16:9

 

 

 

 

 

 

 

，总会有部分区域不属于主容器
 

 

 

 

 

 

 

 ，那这部分区域就是白色的很难看                ，像这样：

         这个问题其实就很简单了
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

，我们给主容器再套一个父容器














，父容器来设置背景色填充留白 
  
  
  
  
  
  
  
 。父容器的样式这么写（自适应窗口                        ，并让子元素水平垂直居中
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，留白部分用背景色填充）：

#app { width: 100vw; height: 100vh; background: rgb(24, 25, 35); display: flex; align-items: center; justify-content: center; }

最终效果图：