我正在寻找一种方法来动态地将元素的大小更改为页面的大小
我知道javascript可以实现。 : - )
但是CSS单元还有一个新的解决方案: vw , vh , vmin 和 vmax 。这些单位与视口相对,效果非常好。我只有一个问题。我的页面应该有最小尺寸。因此,我还必须为视口设置最小大小,以便为从属元素提供最小大小。不幸的是,我找不到解决办法。
答案 0 :(得分:0)
根据您的需要,您可以根据当前的媒体状态(通常是设备宽度)或特定元素为页面定义完全不同的样式表。
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(大约两倍)。