位置: IT常识 - 正文
vue项目网页自适应，等比例放大缩小(vue 网页)
编辑：rootadmin推荐整理分享vue项目网页自适应，等比例放大缩小(vue 网页)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue网页设计,vue 自适应网站ui框架,vue 自适应网站ui框架,vue页面自适应屏幕大小,vue 自适应网站ui框架,vue页面自适应屏幕大小,vue 自适应网站ui框架,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;}最终效果图：
上一篇：postman下载与汉化(附直接下载链接)(postman汉化包)
下一篇：[遇到的问题-已解决]Cannot resolve plugin org.apache.maven.plugins:maven-compiler-plugin:3.1(遇到的问题及解决方法)
