html - 媒体查询曾经是 CSS2 的一部分吗？

Question

我有一个简单的问题 - Media_Queries 是出现在 CSS2(1997 年 11 月推出)中还是仅出现在 CSS 3(2011 年 6 月 7 日)中？

Media queries is a feature of CSS3 allowing content rendering to adapt to different conditions such as screen resolution (e.g. mobile and desktop screen size). It became a W3C recommended standard in June 2012,[1] and is a cornerstone technology of responsive web design (RWD).

来源:https://en.wikipedia.org/wiki/Media_queries

CSS2 Introduced Media Types

CSS3 Introduced Media Queries

来源:https://www.w3schools.com/css/css3_mediaqueries.asp

现在，我很困惑。 Media Query 是 CSS2 的一部分吗？它在 CSS3 或其他方面是否已经存在或只是改进？它只是作为 CSS3 或其他什么的新功能出现的吗？？？

Answer 1

据我所知，CSS2 引入了简单的@media 类型。例如，一种用于屏幕，一种用于打印等。

例如:

@media screen {
    /* screen only */
}
@media print {
    /* print only */
}

CSS3 引入了更复杂的@media 查询。例如，设备的宽度、减少的运动或配色方案。

@media (max-width: 700px) {
    /* viewports under 700px only */
}
@media (prefers-reduced-motion: reduced) {
    /* for motion-reduced browser settings */
}
@media (prefers-color-scheme: dark) {
    /* for dark preferences on browser settings */
}

您可以将它们混合在一起。

@media screen and (min-width: 1000px) {
    /* viewports over 1000px only, on screens */
}
@media print and (orientation: portrait) {
    /* for printing in portrait mode */
}
@media (max-device-width: 700px) and (prefers-color-scheme: light) {
    /* for light preferences on browser settings on devices under 700px wide */
}
@media print and (min-device-width: 900px) and (prefers-reduced-motion: reduced) {
    /* for print, on devices over 900px wide, for reduced motion preferences on the browser settings */
}

TL;DR:CSS2 允许您针对媒体类型执行操作，而 CSS3 允许您针对这些媒体中的不同首选项/设置/尺寸执行操作。