Яке основне використання файлу breakpoints.yml?

Яке призначення точок прориву визначено у `breakpoints.yml?

Чому медіа-запити визначені у breakpoints.yml, а не у файлах CSS?

8 theming

Точки розриву - це те, коли адаптивний дизайн підлаштовується для правильного відображення на різних пристроях. Модуль «Точки переривання» стандартизує використання точок перерви та дає змогу модулям і темам викривати або використовувати точки прориву один одного. Модуль Breakpoint відслідковує точки висоти, ширини та роздільної здатності.

— Клайв

Я просто замислююсь над тим, щоб реалізувати це, оскільки використовую власну тему, засновану на Фундації, але мені здається, що в даний момент це зовсім не має сенсу. Так, є модуль чуйних зображень, але це в основному все, для чого це добре. Я бачу це більше як майбутню функцію, яку добре мати, але не знаю, чи вона коли-небудь буде використана.

drupal.org/documentation/modules/breakpoint

— kmdhrm

Немає можливості використати точки перелому, визначені у файлі breakpoints.yml, у CSS без попередньої або післяобробки. Оскільки ми не використовуємо процесори для стилізації в ядрі, точки переривання все ще важко кодуються у файлах CSS. Однак у користувацькій темі ви можете вільно використовувати такі інструменти, як Gulp або Grunt, і теоретично було б можливо використовувати вхід breakpoints.yml для вашої генерації CSS.

В даний час breakpoints.yml цікавий в основному для JavaScript (JS). Погляньте, наприклад, на ядро модуля Панелі інструментів. Інформація про точку розриву додається до об'єкта JS 'drupalSettings' в 'src / Element / Toolbar.php' таким чином:

$breakpoints = static::breakpointManager()->getBreakpointsByGroup('toolbar');
if (!empty($breakpoints)) {
  $media_queries =  array();
  foreach ($breakpoints as $id => $breakpoint) {
    $media_queries[$id] = $breakpoint->getMediaQuery();
  }

  $element['#attached']['drupalSettings']['toolbar']['breakpoints'] = $media_queries;
}

Потім у JS читаються параметри часу виконання, визначені вище.

var options = $.extend(
  {
    breakpoints: {
      'toolbar.narrow': '',
      'toolbar.standard': '',
      'toolbar.wide': ''
    }
  },
  drupalSettings.toolbar
);

Пізніше слухач подій додається за точку перелому, так що "щось" можна зробити, коли розмір екрана змінюється.

for (var label in options.breakpoints) {
  if (options.breakpoints.hasOwnProperty(label)) {
    var mq = options.breakpoints[label];
    var mql = Drupal.toolbar.mql[label] = window.matchMedia(mq);
    mql.addListener(Drupal.toolbar.mediaQueryChangeHandler.bind(null, model, label));
  }
}

У разі зміни можуть бути здійснені різні дії за точку перелому.

Drupal.toolbar = {
  mediaQueryChangeHandler: function (model, label, mql) {
    switch (label) {
      case 'toolbar.narrow':
        model.set({
          isOriented: mql.matches,
          isTrayToggleVisible: false
        });
        break;

      case 'toolbar.standard':
        // Logic
        break;

      case 'toolbar.wide':
        // Logic
        break;

      default:
        break;
    }
  }
};

Примітка : приклади коду взяті з модуля панелі інструментів Drupal та позбавлені. Використовуйте як натхнення, а не як функціональний код.

Хороше пояснення щодо використання JS mediaQueries взагалі можна знайти тут: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries

— dmsmidt
джерело