What is the basic use of the breakpoints.yml file? What's the purpose of breakpoints defined in `breakpoints.yml?

Why are the media queries defined in breakpoints.yml, and not in CSS files?
There is no way to use the breakpoints defined in a breakpoints.yml file in CSS without pre or post-processing. Since we don't use processors for styling in core, the breakpoints are still hard coded in the CSS files. In a custom theme you are however free to use tools like Gulp or Grunt and it would theoretically be possible to use the breakpoints.yml input for your CSS generation.

Currently the breakpoints.yml is mainly interesting for JavaScript (JS). Have for example a look at the Toolbar module in core. The breakpoint info is added to the 'drupalSettings' JS object in 'src/Element/Toolbar.php' like so:

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

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


Then in JS the run-time settings as defined above are read in.

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


Later an event listener is added per breakpoint so that 'something' can be done when the screen size changes.

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


In the event of a change different actions can be undertaken per breakpoint.

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


Note: the code examples are taken from the Drupal Toolbar module and stripped. Use as inspiration, not as functional code.

A good explanation about using JS mediaQueries in general can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries