不再支持可切换的移动/桌面布局了吗?

我们用新方法消除了这种做法的一些限制——在初始化时确定功能是相当不灵活的,如果有什么变化,我们就必须重新加载整个页面。

这很有用,因为现在的设备越来越不可预测:手机可以展开成平板电脑,笔记本电脑可以转换为平板电脑,您可以将键盘和鼠标插入到许多设备中……

如果您习惯了旧方法,感觉会不一样,但您在初始化程序中所做的任何事情很可能仍然可行,并且对变化的功能反应更灵敏。

您现在可以做到,因为它更加细粒度,您可以在同一个模板内有条件地显示/隐藏内容,而不是替换整个内容。例如,我们的功能服务中现在有一个视口(viewport)对象……

在一个模板中……

{{#if this.capabilities.viewport.lg}}
  大型屏幕的内容
{{/if}}

{{#if this.capabilities.viewport.sm}}
  非常小屏幕的内容
{{/if}}

或者在 JavaScript 中……

get myContent() {
  if (this.capabilities.viewport.sm) {
    return "short content";
  } else {
    return "the very very long content"
  }
}

然后在 CSS 中,您可以使用相同的断点对齐,例如……

@use "lib/viewport";

.my-element {
  font-size: 1em;
  @include viewport.until(sm) {
     font-size: 2em;
  } 
}
8 个赞