การใช้งานพื้นฐานของไฟล์เบรกพอยต์คืออะไร?

จุดประสงค์ของจุดพักที่กำหนดไว้ใน `จุดพักได้อย่างไร?

ทำไมเคียวรีสื่อบันทึกถูกกำหนดในเบรกพอยต์และไม่อยู่ในไฟล์ CSS

ไม่มีวิธีใช้จุดหยุดที่กำหนดไว้ในไฟล์ breakpoints.yml ใน CSS โดยไม่ต้องดำเนินการก่อนหรือหลังการประมวลผล เนื่องจากเราไม่ได้ใช้โปรเซสเซอร์สำหรับการออกแบบในแกนกลางจุดพักจึงยังคงเข้ารหัสยากในไฟล์ CSS ในชุดรูปแบบที่กำหนดเองคุณมีอิสระในการใช้เครื่องมือเช่น Gulp หรือ Grunt และในทางทฤษฎีแล้วมันจะเป็นไปได้ที่จะใช้จุดพักของจุดพักสำหรับการสร้าง CSS ของคุณ

ในปัจจุบัน breakpoints.yml ส่วนใหญ่น่าสนใจสำหรับ JavaScript (JS) ยกตัวอย่างเช่นดูที่โมดูล Toolbar ในแกนกลาง ข้อมูลจุดพักถูกเพิ่มไปยังวัตถุ 'drupalSettings' JS ใน '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 Toolbar และถูกถอดออก ใช้เป็นแรงบันดาลใจไม่ใช่รหัสที่ใช้งานได้

คำอธิบายที่ดีเกี่ยวกับการใช้ JS mediaQueries โดยทั่วไปมีอยู่ที่นี่: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries