Больше никаких переключаемых мобильных/десктопных макетов?

Внести вклад UX
,
5

У этого метода были ограничения, которые мы устранили с помощью новых методов — определение возможностей на этапе инициализации довольно негибко: если что-то изменится, нам пришлось бы перезагружать всю страницу.

Это полезно, потому что устройства стали менее предсказуемыми: телефоны могут разворачиваться в планшеты, ноутбуки могут превращаться в планшеты, клавиатуру и мышь можно подключить к стольким устройствам…

Если вы привыкли к старому подходу, то новый может показаться другим, но всё, что вы делали в инициализаторе, скорее всего, всё ещё возможно — и при этом более отзывчиво к изменяющимся возможностям.

Теперь это возможно: подход стал более детальным, и вы условно показываете или скрываете контент внутри одного шаблона, а не заменяете его целиком. Например, теперь в нашем сервисе возможностей есть объект viewport…

В шаблоне…

{{#if this.capabilities.viewport.lg}}
  Контент для больших экранов
{{/if}}

{{#if this.capabilities.viewport.sm}}
  Контент для очень маленьких экранов
{{/if}}

или в JS…

get myContent() {
  if (this.capabilities.viewport.sm) {
    return "короткий контент";
  } else {
    return "очень-очень длинный контент";
  }
}

А в CSS вы можете использовать те же контрольные точки, например…

@use "lib/viewport";

.my-element {
  font-size: 1em;
  @include viewport.until(sm) {
     font-size: 2em;
  } 
}
8 лайков