NativeScript 8.8 引入 CSS 媒体查询支持

NativeScript 8.8 引入了备受期待的 CSS 媒体查询支持，以及 MediaQueryList API 和 matchMedia() 方法，并且您可以在任何 JavaScript 框架风格中使用它们。

媒体查询允许您根据设备的功能或特性（如屏幕方向、主题或视口宽度和高度）有条件地应用 CSS 样式。

更具体地说，新版本包含了 媒体查询级别 3 规范以及以下功能

• 方向 (orientation)
• 首选颜色方案 (prefers-color-scheme)（尽管此功能属于媒体查询级别 5，但它已与当前实现一起添加，以实现主题样式）
• 宽度 (width)
• 高度 (height)
• 设备宽度 (device-width)（与宽度相同）
• 设备高度 (device-height)（与高度相同）

视口功能（如宽度和高度）通过使用min-或max-前缀支持范围值。

基本用法

以下是一些在 NativeScript 中声明媒体查询的示例

@media only screen and (orientation: landscape) {
  Label {
    color: yellow;
    font-size: 24;
  }
}

@media only screen and (prefers-color-scheme: dark) {
  Label {
    background-color: #fff;
    color: #000;
  }
}

@media only screen and (max-width: 400) {
  Label {
    font-size: 10;
  }
}

@media only screen and (min-height: 800) {
  Page {
    background-color: red;
  }
}

就像样式属性一样，长度功能值（例如宽度）也可以接受 DIP 或设备像素 (px) 单位。

高级用法

非运算符 (not)

not 运算符用于否定媒体查询，如果查询原本会返回 false，则返回 true。

@media screen and not (orientation: portrait) {
  Label {
    color: yellow;
    font-size: 24;
  }
}

嵌套媒体查询

@media only screen and (orientation: landscape) {
  Label {
    color: yellow;
    font-size: 24;
  }

  @media only screen and (max-width: 400) {
    Label {
      font-size: 10;
    }
  }
}

在媒体查询中嵌套关键帧

除了 CSS 选择器之外，关键帧也可以使用媒体查询进行条件设置。

@keyframes slidein {
  from {
    background-color: yellow;
  }

  to {
    background-color: pink;
  }
}

/** This one will apply if condition is truthy **/
@media only screen and (orientation: landscape) {
  @keyframes slidein {
    from {
      background-color: red;
    }

    to {
      background-color: green;
    }
  }
}

matchMedia 方法

使用媒体查询进行条件导航

有时，应用程序需要根据设备屏幕尺寸或方向导航到完全不同的Page。目前，可以使用 NativeScript 的 屏幕尺寸限定符 API 来实现。
不幸的是，此功能仅限于纯 JS/TS 应用程序，其他 JavaScript 风格不可用。

方法 matchMedia() 加入进来，为我们提供了更多可能性，并且可以在任何 JavaScript 风格中使用。
以下示例演示了如何在屏幕宽度大于 600 DIP 时导航到备用Page

const mql = matchMedia('only screen and (max-width: 600)');

Frame.topmost().navigate({
  // Navigate to another page if screen is too big
  moduleName: mql.matches ? './pages/phone' : './pages/tablet',
});

使用监听器跟踪媒体查询更改

matchMedia() 方法返回一个 NativeScript 可观察实例，使您可以使用事件侦听器跟踪媒体查询更改。

const mql = matchMedia('only screen and (orientation: portrait)');
mql.addEventListener('change', (event) => {
  console.log('Is screen orientation still portrait? ' + event.matches);
});

结论

这仅仅是一个开始。媒体查询有望为我们的 NativeScript 应用程序的样式设计开启更多新的可能性，并为用户提供绝佳的体验。

加入我们，开启一场新的 CSS 样式设计冒险！ 🛸