Việc sử dụng cơ bản của tập tin breakpoint.yml là gì?

Mục đích của các điểm dừng được định nghĩa trong `breakpoint.yml là gì?

Tại sao các truy vấn phương tiện được xác định trong breakpoint.yml mà không phải trong các tệp CSS?

8 theming

— Prakhyat
nguồn

Điểm dừng là nơi thiết kế đáp ứng điều chỉnh để hiển thị chính xác trên các thiết bị khác nhau. Mô-đun Breakpoint chuẩn hóa việc sử dụng các điểm dừng và cho phép các mô-đun và chủ đề hiển thị hoặc sử dụng các điểm dừng của nhau. Mô-đun Breakpoint theo dõi các điểm dừng chiều cao, chiều rộng và độ phân giải.

— Clive

Tôi chỉ nghĩ về việc thực hiện điều này vì tôi sử dụng chủ đề tùy chỉnh dựa trên Foundation nhưng với tôi rằng tại thời điểm này điều này không có ý nghĩa gì cả. Vâng, có các mô-đun hình ảnh đáp ứng nhưng về cơ bản tất cả đều tốt. Tôi thấy nó giống như một tính năng trong tương lai rất tốt để có nhưng không biết liệu nó có được sử dụng không.

drupal.org/documentation/modules/breakpoint

— kmdhrm

Không có cách nào để sử dụng các điểm dừng được xác định trong tệp breakpoint.yml trong CSS mà không cần xử lý trước hoặc hậu xử lý. Vì chúng tôi không sử dụng bộ xử lý để tạo kiểu trong lõi, nên các điểm dừng vẫn được mã hóa cứng trong các tệp CSS. Tuy nhiên, trong một chủ đề tùy chỉnh, bạn có thể tự do sử dụng các công cụ như Gulp hoặc Grunt và về mặt lý thuyết có thể sử dụng đầu vào breakpoint.yml cho thế hệ CSS của bạn.

Hiện tại breakpoint.yml chủ yếu thú vị cho JavaScript (JS). Ví dụ, hãy xem mô-đun Thanh công cụ trong lõi. Thông tin điểm dừng được thêm vào đối tượng JS 'drupalSinstall' trong 'src / Element / Thanh công cụ.php' như vậy:

$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;
}

Sau đó, trong JS, các cài đặt thời gian chạy như được định nghĩa ở trên được đọc trong.

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

Sau đó, một trình lắng nghe sự kiện được thêm vào mỗi điểm dừng để có thể thực hiện 'điều gì đó' khi kích thước màn hình thay đổi.

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));
  }
}

Trong trường hợp thay đổi, các hành động khác nhau có thể được thực hiện trên mỗi điểm dừng.

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;
    }
  }
};

Lưu ý : các ví dụ mã được lấy từ mô-đun Thanh công cụ Drupal và tước. Sử dụng như nguồn cảm hứng, không phải là mã chức năng.

Có thể tìm thấy một lời giải thích tốt về việc sử dụng JS mediaQueries tại đây: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries

— dmsmidt
nguồn