html - HTML：元素的动态大小

Question

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

Answer 1

我认为你最好的选择是使用 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' />

其中定义的样式small.css仅在视口为 700 像素或更large.css小时应用，而在 701 像素以上时应用的样式。

---

尺寸特定规则：

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 的 CSS 技巧（它本身大量使用 CSS 媒体查询）中还有很多这样的内容

此外，对视口单元的支持非常低，虽然媒体查询并不普遍，但它们肯定更为普遍（大约是两倍）。