文章标签

新的 CSS 媒体查询范围语法

媒体查询级别 4 规范引入了针对一系列视窗宽度的新语法，使用常见的数学比较运算符，如 <、> 和 =，在语法上更有意义，同时为响应式网页设计编写更少的代码。

Preethi Selvam 于 2022 年 10 月 31 日

在创建基于组件的前端基础设施时，我个人遇到的最大痛点之一是创建既可重用又响应式的组件，这些组件中包含嵌套组件。…

Dan Christofi 于 2022 年 4 月 26 日

我们无法谈论网页开发而不谈论响应式设计。这在今天已经成为定局，并且已经存在很多年了。媒体查询是响应式设计的一部分，它们不会消失。自从引入了……

Temani Afif 于 2023 年 7 月 6 日

Una 称之为 新的响应式。这是对我们曾经身处的时代的致敬，也就是响应式设计的时代。响应式设计是流体网格、灵活媒体和媒体查询，新的响应式是这些东西……

Chris Coyier 于 2021 年 6 月 22 日

多年来，我们对文本的样式方法并没有太大改变。已经取得了一些进步，帮助我们提高了灵活性，比如布局，但就样式而言，我们设计的大多数有限方面，比如文本，仍然保持相对不变。…

Scott Kellum 于 2021 年 4 月 20 日

.wrapper {
  width: clamp(16rem, 90vw, 70rem);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

通常我会在那里设置一个 max-width，但正如 Andy 所说

这在中等大小的视窗中会成为一个小问题，比如

…

Chris Coyier 于 2021 年 2 月 18 日

在为网站构建组件时，你并不总是知道该组件将如何使用。也许它……

Mathias Hülsbusch 于 2020 年 11 月 12 日

有很多这样的桌面应用程序，其目标是在不同尺寸下同时显示你的网站。因此，例如，你可以编写 CSS 并确保它在所有视窗中都能正常工作……

Chris Coyier 于 2020 年 9 月 7 日

有趣的事实：可以创建完全没有媒体查询的响应式组件。当然，如果我们有容器查询，它们对组件级别的响应式设计将非常有用。但我们没有。尽管如此，无论是否……

Geoffrey Crofte 于 2021 年 8 月 3 日