以背景 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;
}

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