html css背景高度按比例自适应100%

css背景的自适应在于你的div的高度

如果你的div是自适应高度的话

那么背景也就自定义了

如果你的背景是纯色的话那么就没什么好说的了

如果是小图你可以使用平铺

如果是大图你可以固定背景大图

首先要在html页面头部加上下面的代码，其次要把页面中的宽度修改为百分比，不能不用固定尺寸，一些小的模块可以用固定尺寸。再就是css中要应用到媒体查询，也就是@media，不懂可以百度。

第一种：用vw和vh,

1vw 的意思就是把屏幕的宽分成一百分后中的一分，也就是1%

vh 指高度，同上。

第二种：用bootstrap吧，bootstrap是一款CSS框架插件，自适应上做的很好，

比如，我们做一个DIV，让电脑端显示为三列，手机端显示一列，可以这样：

<div calss="row">

    <div class="col-md-3 col-12">第一列</div>

    <div class="col-md-3 col-12">第二列</div>

    <div class="col-md-3 col-12">第三列</div>

</div>

row表示行，col表示列，

col-md-3 表示在屏幕宽大于768时，分成12列中的三列，

col-12 表示屏幕宽在小于576时，分成12列，占全12列，也就是表示一整行的意思，

另外还有其它的单位，如 sm lg xl 等，都表示不同浏览器的宽度。

希望以帮助到你！

---