Question

当浏览器的width属性使用纯Css减少或增加时，可以调整div的宽度吗？

我的意思是，如果我在分辨率中有这样的元素：

div {
  width: 20%;
}

然后，我希望每减少宽度浏览器每10px增加1％的div宽度，只使用Css3可以吗？

Answer 1

随着CSS的减少，窗口减小的宽度变得很容易。 随着窗口减少而增加宽度不是。

可以使用仅限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的宽度？

2 个答案: