Точки останова и параметр font-size

Кто-нибудь имел опыт использования параметра "размер шрифта" с миксином в точке останова?

В документации указано следующее...

    <$font-size>: When using EMs for your grid, the font size is important. Default: $base-font-size

В дизайне, с которым я работаю, я использую подход Mobile First, поэтому $base-font-size = 12px.

Затем я добавляю точку останова на 50em (произвольное значение для этого примера) следующим образом...

    @include at-breakpoint(50em 12, 16px) {
      .container{
        @include container;
      }
    }

Я не уверен, правильно ли я понял это, но я ожидал, учитывая, что я указал значение для «размера шрифта», что размер моего шрифта увеличится до 16 пикселей, как только экран превысит 50em.

Тем не менее, я думаю, что, возможно, ошибся в отношении назначения этого параметра «размер шрифта», поскольку размер шрифта остается равным 12 пикселям при любом размере.

Кто-нибудь знает, на что влияет этот параметр?


person mtt_g    schedule 21.09.2012    source источник


Ответы (1)


Кажется, эта функция плохо документирована. Он предназначен не для установки размера шрифта, а для исправления медиа-запросов на основе em. Если вы используете базовый размер шрифта 12px, это очень важно.

Браузеры всегда интерпретируют медиа-запросы на основе em относительно размера шрифта браузера по умолчанию (16 пикселей). В этом нет никакого смысла, но они так делают. Таким образом, чтобы вы могли установить точку останова на 50em (*12px), мы должны установить точку останова на 37,5em (*16px, браузер по умолчанию). Передача вашего базового размера шрифта позволяет нам внести эту корректировку.

Это должно быть лучше задокументировано, и аргумент должен быть лучше назван. Я создал проблему на GitHub.

person Miriam Suzanne    schedule 21.09.2012
comment
Спасибо, Эрик, это прекрасно объясняет. Между прочим, вы проделали отличную работу с Сюзи, мне нравится с ней работать. - person mtt_g; 21.09.2012