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;
}

最终效果图：

总结

到此这篇关于vue项目网页自适应等比例放大缩小的文章就介绍到这了,更多相关vue网页自适应等比例放大缩小内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论