Making breakpoints with Susy
you can have as many breakpoints as you need. However, rather than try and remember the various widths for the breakpoints in ems or pixels, let’s make a couple of variables, one called
$M (for medium-sized viewport widths) and the other called
$L for larger ones. We’ll add these in the
_layouts.scss partial below the other Susy settings:
// Breakpoint variables // ==================================================================== $M: 47em; // roughly speaking, around 750px wide with 16px body font $L: 75em; // roughly speaking, around 1200px wide with 16px body font
Remember that our first layout will actually be the absence of media queries: that’s our ‘accessibility’ layout. With these two variables we ...