responsive-designsassmedia-queriesbreakpoint-sass

Does sass breakpoint have a base font size setting?


Can you make sass breakpoint, when using ems for media queries, be based on your base font size, not the browsers default font size?


Solution

  • No it does not. Media queries written in em units are always based on the browser's default font size, not on your root font size.

    We had toyed with conversion in, but between varying contexts on a per-selector basis, incompatibility with other Compass extensions (including core Compass media queries and the Compass Core vertical rhythm mixin), and the bad mental model it puts people in (thinking in one scale while printing another scale becomes very hard to debug), we decided not to include it and not support it in the future.

    What I would suggest if you don't like switching the context in your head while writing em based media queries is to write them in px and then set $breakpoint-to-ems: true and it will automatically do the conversion at the end. It is because em based media queries are always based on the browser's default font size that we're able to do this.