breakpoints.yml 파일의 기본 사용법은 무엇입니까?

`breakpoints.yml에 정의 된 중단 점의 목적은 무엇입니까?

미디어 쿼리가 왜 CSS 파일이 아닌 breakpoints.yml에 정의되어 있습니까?

8 theming

— 프라 키야
소스

중단 점은 다른 장치에 올바르게 표시하기 위해 반응 형 디자인이 조정되는 곳입니다. 중단 점 모듈은 중단 점 사용을 표준화하고 모듈과 테마가 서로의 중단 점을 노출하거나 사용할 수 있도록합니다. 중단 점 모듈은 높이, 너비 및 해상도 중단 점을 추적합니다.

— Clive

Foundation 기반 사용자 정의 테마를 사용하기 때문에 이것을 구현하려고 생각하고 있지만 현재로서는 이것이 전혀 의미가 없다고 생각합니다. 예, 반응 형 이미지 모듈이 있지만 기본적으로 모든 것이 좋습니다. 나는 그것이 가지고 있기는하지만 미래에 사용 될지 모르는 미래의 기능처럼 보입니다.

drupal.org/documentation/modules/breakpoint

— kmdhrm

사전 또는 사후 처리없이 CSS의 breakpoints.yml 파일에 정의 된 중단 점을 사용할 방법이 없습니다. 우리는 코어에서 스타일링을 위해 프로세서를 사용하지 않기 때문에 중단 점은 여전히 CSS 파일에 하드 코딩되어 있습니다. 그러나 사용자 정의 테마에서는 Gulp 또는 Grunt와 같은 도구를 자유롭게 사용할 수 있으며 CSS 생성에 breakpoints.yml 입력을 이론적으로 사용할 수 있습니다.

현재 breakpoints.yml은 주로 JavaScript (JS)에 흥미 롭습니다. 예를 들어 핵심 툴바 모듈을 살펴보십시오. 중단 점 정보는 다음과 같이 'src / Element / Toolbar.php'의 'drupalSettings'JS 객체에 추가됩니다.

$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 Toolbar 모듈에서 가져와 제거했습니다. 기능 코드가 아닌 영감으로 사용하십시오.

일반적으로 JS mediaQueries 사용에 대한 자세한 설명은 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries 에서 확인할 수 있습니다.

— dmsmidt
소스