如何使用 Css 随着屏幕宽度的减小增加 div 的宽度？

Question

当浏览器的宽度属性减少或增加时，可以使用纯 Css?

调整 div 的宽度

我的意思是，如果我在决议中有这样的元素：

div {
  width: 20%;
}

然后，我想在宽度浏览器每减少 10px 时增加 1% div 的宽度，可以只使用 Css3?

Answer 1

使用 CSS 可以很容易地减小 window 宽度。增加宽度，因为 window 正在减少不是。

可以使用仅 css 的解决方案，但它需要大量的 @media 查询：

JS Fiddle (using larger percentage for example)

@media only screen and (max-width: 400px) {
    div {
        width: 20%;
    }
}

@media only screen and (max-width: 390px) {
    div {
        width: 21%;
    }
}

@media only screen and (max-width: 380px) {
    div {
        width: 22%;
    }
}

等...

CSS 没有内置逻辑来计算视口的宽度并根据它应用样式，而无需使用媒体查询手动执行。肯定会推荐 js 解决方案。

Answer 2

这也可能对您有所帮助，结合使用以下代码和在 CSS 中使用 calc() 可能会有所帮助。

vw, vh
1vw = 1% of viewport width
1vh = 1% of viewport height

让我们用您的代码试一试。

如何使用 Css 随着屏幕宽度的减小增加 div 的宽度？

How to grow the width of a div as the width screen decreases using Css?

css

media-queries

responsive-design