HTML:元素的动态大小

时间:2013-03-14 12:16:49

标签: html css dynamic

我正在寻找一种方法来动态地将元素的大小更改为页面的大小 我知道javascript可以实现。 : - )
但是CSS单元还有一个新的解决方案: vw vh vmin vmax 。这些单位与视口相对,效果非常好。我只有一个问题。我的页面应该有最小尺寸。因此,我还必须为视口设置最小大小,以便为从属元素提供最小大小。不幸的是,我找不到解决办法。

1 个答案:

答案 0 :(得分:0)

我认为您最好的选择是使用CSS媒体查询。

根据您的需要,您可以根据当前的媒体状态(通常是设备宽度)或特定元素为页面定义完全不同的样式表。

E.g。

不同的样式表

<link rel='stylesheet' href='css/base.css' />
<link rel='stylesheet' media='screen and (max-width: 700px)' href='css/small.css' />
<link rel='stylesheet' media='screen and (min-width: 701px)' href='css/large.css' />

small.css中定义的样式仅在视口为700px或更小时应用,而large.css的样式在701px向上时应用。


尺寸特定规则:

body {
    background: #000;
    color: red;
}


//styles within this block are only applied when the window is <= 700px
@media all and (max-width: 700px) {
  body {
    background: #ccc;
    color: #258;
  }
}

Chris Coyer's CSS tricks上有更多这样的内容(它本身会大量使用CSS媒体查询)

另外support of viewport-units is pretty low虽然媒体查询无处不在,但它们是certainly much more prevalent(大约两倍)。