以背景 background-image 为例,不使用 media 制作自适应布局

最近跟老大学了一招,因为要做一个以疫情为主题的新品宣传活动,banenr 是一个轮播图,使用 swiper 制作,三个背景分别以 backgroud 添加在三个 slider 上面。在做兼容的时候,这个banner 的高度要与屏幕的宽度成比例缩放。之前一直认为,这个比例缩放是通过 css3 的 @media 定义不同的屏幕尺寸来做到自适应的,从这个例子可以看到,不使用 @media 也可以做到自适应,而且效果非常好。

可以看一下链接:https://www2.anviz.com/2000.html?lang=en_us

在写这个效果前要先理解一下两个属性,这两个属性不同的使用方法会直接影响这个自适应的效果:

  • background-image(url)
  • background(url)

background-image(url) 是 background 其中的一个子样式,可以为一个元素设置一个或多个背景图像,可以提取公共样式;

而 background 是一个集合,当改变 background 时,会将它所有的子样式覆盖,不可以提取公共样式。

比如,有多个 slider ,那么想把这个 slider 上的公共样式提取出来,比如 background-size, background-position等,就不能在 slider 上使用 background(url),如果使用  background(url)  时,它当前的节点上关于 backgroud 是没有公共样式可提取的,看它们的语法:

//简写样式
background: no-repeat center/80% url("../img/image.png");

//所有子样式
  1.  background-repeat: no-repeat;
  2. background-size: cover;
  3. background-position: center;
  4.  background-image: url(https://www.anviz.com/file/files/1173);

 

好,下面说这个这个自应应的 banner 的做法。

当拿到到三张背景的图片,图片尺寸是一样的并且图片是X轴方向全屏铺满整个 banner 容器的,这里说的容器+图片在不变形的情况下自适应,就是指当前图片容器的高度的使用方法。使用 background-image 时,必须要给当前容器定义个高度,这是谁都知道的方法。

但是这个高度如果写自适应时是不能写死的,原来我做自适应时,这个高度是写死的,然后使用 css3 的 media 不停的判断浏览器的宽度来调整容器的高度,这样有个明显的敝端,就是如果对某个尺寸的宽度没有定义时,布局就会错乱。

新的容器高度计算公式:  图片高度 / 图片宽度 * 100% + vw ,这个重要!这个很重要!这个很重要!

为什么使用 vw 作为这个高度的单位呢?因为这个容器的高度是随着当前窗口的宽度变化而变化的,而当前窗口的宽度单位,我们使用 vw 来定义,使用其它单位也会出问题。


比如,图片是 1440px * 920px ,容器为 banner:  920 / 1440 * 100% + vw

<div class="banner">
      <div class="swiper-container">
             <div class="swiper-wrapper">
                     <div class="swiper-slide"></div>
             </div>
      </div>
</div>
//css
.s2000 .banner {
     100%;
    overflow: hidden;
}
.s2000 .banner .swiper-slide:nth-child(1) {
    background-image: url(https://www.anviz.com/file/files/1173);
}
.s2000 .banner .swiper-slide {
    height: 63.8vw;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

这样,当屏幕缩小时,图片容器的高度也会自动缩小,达到自适应的效果。

原文地址:https://www.cnblogs.com/baiyygynui/p/12664629.html