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

最终效果图:

总结

作者:欧根老婆的狗 原文地址:https://blog.csdn.net/zxczero/article/details/126928176

%s 个评论

要回复文章请先登录注册