Has anyone had any experience of using the 'font-size' parameter with the at-breakpoint mixin?
In the documentation it states the following...
<$font-size>: When using EMs for your grid, the font size is important. Default: $base-font-size
In a design I am working with I am taking the mobile first approach so the $base-font-size = 12px.
I am then adding a breakpoint at 50em's (arbitrary value for this example) as follows...
@include at-breakpoint(50em 12, 16px) {
.container{
@include container;
}
}
I'm not sure if I have got the understanding of this correctly but I was expecting, given that I've specified a value for 'font-size', that my font size would increase to 16px once the screen exceeded 50em.
However, I think I might have got the wrong end of the stick as to the purpose of this 'font-size' parameter as the font size remains at 12px at any size.
Does anyone know what this parameter affects?
It seems that feature is not well documented. It is not there to set a font size, but to fix em-based media-queries. If you are using a base font-size of 12px, this is very important.
Browsers always interperet em-based media-queries relative to the default browser font size (16px). It doesn't make any sense at all, but that's how they do it. So, in order for you to make a breakpoint at 50em (*12px), we have to set the breakpoint at 37.5em (*16px, the browser default). Passing your base font-size allows us to make that adjustment.
This should be better documented, and the argument should be better named. I've created an issue on GitHub.