_breakpoint.scss

abstracts/_breakpoints.scss

// max-width: ≤ | min-width: ≥
// Media query:
// el1: width < $breakpoint-mobile-menu;
// el2: width >= $breakpoint-mobile-menu;

// BREAKPOINTS
$breakpoint-mobile-menu: 62em;  // entspricht 992px

// TWEAKPOINTS
$tweakpoint-53: 53em;     // entspricht 848px
$tweakpoint-tablet: 48em; // entspricht 768px
$tweakpoint-40: 40em;     // entspricht 640px
$tweakpoint-30: 30em;     // entspricht 480px

Note

Media-Queries schauen nicht auf die Schriftgröße, die im Root eingestellt ist, sondern auf die Einstellungen im Browser. Media queries sind @-rules, und diese haben keinen Zugriff auf das CSS.
CSS Dem Mod 4 Media queries and units

Tip

Auch wenn wir den alten Safari-Bug nicht mehr berücksichtigen müssen, ist es schlau, die Media queries in em oder in rem anzugeben (egal was, beides wirkt sich gleich aus). Warum? Manche User zoomen, und die Zoomstufe ändert die Ansicht, aber die Media queries gehen mit (es wird einfach alles größer). Aber! Manche User stellen aber die Schriftröße im Browser ein, und wenn im Media query Pixelwerte stehen dann wird einfach nur die Schrift größer, aber der Breakpoint bleibt, wo er ist. Folge: Das Layout wird gequetscht. Abhilfe: Media queries in em/rem angeben, diese “sehen” die Änderung der Schriftgröße im Browser und ändern auch den Breakpoint.