如何随着宽度屏幕使用 Css 减小而增加 div 的宽度? [英] How to grow the width of a div as the width screen decreases using Css?

问题描述

是否可以使用纯 Css 在浏览器的宽度属性增加或减少时调整 div 的宽度?

It does possible to adjust the width of a div as the width property of the browser is decreasing or increasing using pure Css?

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

I mean, if I have an element like this in a resolution:

div {
  width: 20%;
}

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

Then, I want to increase 1% the width of the div for every 10px that I decrease the width browser, it's possible using just Css3?

推荐答案

使用 CSS 可以轻松地随着窗口减小而减小宽度.随着窗口减小而增加宽度不是.

Decreasing width as window is descreased is easy with CSS. Increasing width as window is decreasing is not.

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

Its possible to use a css only solution, but it will require a wild amount of @media queries:

JS Fiddle(例如使用更大的百分比)

@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 解决方案.

CSS doesn't have the logic built in to calculate the width of a viewport AND apply styles based on it without manually doing it with a media query. A js solution would definitely be recommended.

这篇关于如何随着宽度屏幕使用 Css 减小而增加 div 的宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！