网站布局怎么让banner自适应浏览器宽度?

网站布局怎么让banner自适应浏览器宽度? 高度写死之后和下个板块的距离太大!

img

在css设置高度时有几种单位
分别是:px,%,vh
你可以试试用vh,vh的意思是网页高度的百分比,举例,如果网页高度是1080px,
50vh就是一半,就是540px,
用vh设置高度比用百分比布局好的地方就是你不用管父级盒子高度是多少,vh参考的就是浏览器的高度
你在对页面所有内容进行高度设置时都可以使用vh
举例,如果你拿到的设计图高度是1080版本的,但是需要兼容各种屏幕大小
比如其中一个盒子的宽高是100*100的,你在设置这个盒子的样式时,可以参考,当前这个盒子在1080版本下面是100px,假设你的网页高度就是1080,那么你可以对盒子的高度设置大概10vh左右,这样哪怕网页高度变成1080的两倍,你盒子的高度对应也会翻倍

flex布局 或者 相对单位 布局 比如 百分比

使用image
只设置宽度100%,高度会根据宽度自适应;
使用background-image
容器高度使用百分比,background-size: 100% 100%;
或者使用rem单位。

flex布局,百分比,栅栏布局