怎么设置页面所有元素的大小随着窗口变化

可以使用 CSS 中的 `*` 通配符来实现页面所有元素的大小随窗口变化。具体做法是，使用 `*` 通配符来选中所有元素，然后设置宽度和高度为视口宽度和高度的百分比值。

示例代码：

<style>
* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

* {
  width: 100%;
  height: 100%;
}
</style>

在上面的代码中，我们首先设置了所有元素的 `box-sizing` 属性为 `border-box`，以确保元素的宽度和高度包括内边距和边框。然后，我们设置了 `html` 和 `body` 元素的宽度和高度为 100%，以确保页面占满整个视口。最后，我们使用 `*` 通配符选中所有元素，并设置宽度和高度为 100%，从而实现所有元素的大小随窗口变化。

需要注意的是，这种做法可能会对某些元素的布局和样式造成影响，因此需要根据具体情况进行调整。此外，为了避免元素的大小过于扩张或收缩，可以结合 CSS3 中的 `max-width` 和 `max-height` 属性来设置元素的最大宽度和最大高度。

相关问题

怎么设置页面元素大小随窗口变化

可以使用 CSS3 中的 `vw` 和 `vh` 单位来实现页面元素大小随窗口变化。`vw` 和 `vh` 分别表示视口宽度和视口高度的百分比单位，其中 1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。

例如，如果想让一个元素的宽度随着窗口大小的变化而变化，可以使用 `vw` 单位来设置宽度值，如下所示：

.container {
  width: 80vw;
}

这样，元素的宽度会自动调整为视口宽度的 80%。同样的，如果想让元素的高度随着窗口大小的变化而变化，可以使用 `vh` 单位来设置高度值。

另外，还可以结合 CSS3 中的 `calc()` 函数来实现更加复杂的计算，例如：

.container {
  width: calc(100vw - 200px);
}

这样，元素的宽度会自动调整为视口宽度减去 200px，也就是视口宽度的 100% 减去 200px。

需要注意的是，使用 `vw` 和 `vh` 单位设置元素大小时，需要考虑到不同设备的屏幕大小和比例，以确保元素在不同设备上都能够正常显示。

怎么设置当窗口缩小到一定大小时，页面的元素不会跟着变化

可以使用CSS媒体查询来实现这个效果。在CSS中设置一个@media规则，当浏览器宽度小于某个值时，应用相应的CSS样式。具体实现方式如下：

@media screen and (max-width: 768px) {
  /* 在这里设置缩小窗口后的CSS样式 */
}

在这个例子中，当浏览器宽度小于或等于768像素时，应用@media规则下的CSS样式。你可以在这里设置元素的大小、位置和其他样式，使它们在窗口缩小时不会跟着变化。