Media queries 根据设备特性——最常见的是 viewport width——有条件地应用 CSS,让单一样式表能够适应手机、平板和桌面设备。
css
{ : ; }
(: ) {
{ : ; : grid; : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
/* ✅ mobile-first: base = mobile, layer on enhancements as it gets wider */
@media (min-width: 768px) { ... }
/* desktop-first: base = desktop, override down for smaller screens */
@media (max-width: 767px) { ... }
Mobile-first(min-width)通常是首选方案:为小屏幕编写简单的基础样式,然后为更大屏幕逐步添加复杂性。这往往能产生更清洁、更轻量的 CSS,并与内容重排的方式相匹配。
@media (max-width: 600px) { } /* small screens */
@media (orientation: landscape) { } /* device orientation */
@media (prefers-color-scheme: dark) { } /* user wants dark mode */
@media (prefers-reduced-motion: reduce) { } /* user dislikes animation — accessibility */
@media print { } /* print stylesheet */
prefers-reduced-motion 和 prefers-color-scheme 响应用户偏好而非屏幕尺寸——对无障碍访问和主题配置很重要。
@media (min-width: 768px) and (max-width: 1023px) { /* tablets only */ }
Media queries 响应 viewport;较新的 container queries(@container)响应父元素的尺寸——对真正可复用的组件更有利。它们是 media queries 的补充而非替代。
Media queries 是响应式设计的基础——根据屏幕尺寸调整布局、间距和列。
Mobile-first min-width 方法使 CSS 更易管理,而偏好查询(prefers-reduced-motion、prefers-color-scheme)将响应能力扩展到无障碍访问和主题配置。