html - HTML:元素的动态大小

我正在寻找一种将元素的大小动态更改为页面大小的方法。
我知道使用javascript是可能的。 :-)
但是，CSS单元还有一个新的解决方案：vw，vh，vmin和vmax。这些单位是相对于视口的，并且效果非常好。我只有一个问题。我的页面应该有最小尺寸。因此，我还必须为视口设置最小尺寸，以使相关元素具有最小尺寸。不幸的是，我没有找到解决方案。

最佳答案

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

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

例如。

不同的样式表

<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' />

仅当视口小于等于700px时才应用small.css中定义的样式，而向上701px时才应用large.css中定义的样式。



大小特定规则：

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（大约是两倍）。