#媒体查询

Lynx 实现了 CSS Media Queries Level 4 的一个子集。可以使用 @media 规则，根据视口和其他运行时环境值应用不同的样式。

#启用 CSS Rule 编码

媒体查询需要启用 CSS Rule 编码。在 lynx.config.mjs 已有的 plugins 数组中添加 pluginLynxConfig：

import { pluginLynxConfig } from '@lynx-js/config-rsbuild-plugin';

export default defineConfig({
  plugins: [
    pluginLynxConfig({
      enableCSSRule: true,
    }),
  ],
});

enableCSSRule 要求 Lynx SDK 或 Clay 4.0 及更高版本。未启用时，@media 规则不会被编码到模板中，也不会在运行时生效。

#语法支持

#媒体类型

#逻辑修饰符和运算符

Lynx 支持 not、only、逗号分隔的查询列表（OR 语义），以及 and、or 和 not 媒体条件。与 CSS 语法一致，不能在同一层级中混用 and 和 or；需要混用时，应通过圆括号嵌套条件。

/* and / or / not 组合 */
@media (min-width: 600px) and (orientation: portrait) { ... }
@media (hover) or (pointer) { ... }
@media not (prefers-color-scheme: dark) { ... }

/* Level 4 范围语法 */
@media (300px <= width <= 600px) { ... }
@media (width > 400px) { ... }
@media (100px < width < 500px) { ... }

范围语法应使用未加前缀的 feature 名称，例如 width，而不是 min-width。

#支持的媒体特征

#视口尺寸

布尔形式 (width) 在视口宽度大于零时匹配。

#宽高比

值可以是 16/9 形式的比例，也可以是单纯数字，后者会被视为 N/1。

#分辨率和像素密度

resolution 支持 dppx、x、dpi 和 dpcm 单位，其中 x 是 dppx 的别名。

#方向

正方形视口被视为 portrait。

#交互能力

#用户偏好

宿主可通过 UpdateColorScheme 更新系统颜色模式。默认值为 light。

#色深

#支持的值单位

#长度单位

#分辨率单位

#与 Web 的关键差异

#device-* 尺寸使用视口值

与 Web 不同，Lynx 不会通过媒体查询暴露物理设备尺寸。device-width、device-height 和 device-aspect-ratio 分别使用与 width、height 和 aspect-ratio 相同的视口值。

#不支持的 Feature 采用 Fail Closed 策略

未列在本文档中的媒体特征不会被识别，查询结果恒为 false。

#媒体类型始终是 screen

Lynx 只有屏幕渲染上下文：

• @media print { ... } 永远不生效。
• @media not print { ... } 永远生效。
• @media screen { ... } 等同于 @media all { ... }。

#无效查询列表会使用 not all

当整个媒体查询列表都无效时，Lynx 会将其替换为 not all，因此不会匹配。对于逗号分隔的列表，无效项会被丢弃，合法项仍以 OR 语义参与匹配。

#使用示例

/* 响应式布局 */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

/* 暗色模式 */
@media (prefers-color-scheme: dark) {
  .card {
    background-color: #1a1a1a;
  }
}

/* 高 DPR 设备 */
@media (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
  }
}

/* Level 4 范围语法 */
@media (400px <= width <= 800px) {
  .sidebar {
    display: none;
  }
}

#兼容性