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

Итак, я работаю над проектом, используя Bootstrap 4 sass, и я хочу, чтобы размер шрифта h3 был отзывчивым.

Когда я перехожу к _type.scss, свойство h3 выглядит так:

h3, .h3 { font-size: $h3-font-size; }

он вызывает переменную $h3-font-size из _variables.scss, которая выглядит следующим образом: $h3-font-size: $font-size-base * 1.75 !default;

переменная $font-size-base выглядит так:

$font-size-base:              1rem !default;

Итак, до сих пор я знаю, что размер шрифта класса h3 составляет 1,75 rem, я хочу, чтобы размер шрифта был 1,5 rem от xs до md и 1,75 rem от md до lg.

я пошел в документацию Bootstrap 4 для типографики, и там написано следующее:

Адаптивная типографика относится к масштабированию текста и компонентов путем простой настройки размера шрифта корневого элемента в серии медиа-запросов. Bootstrap не делает этого за вас, но его довольно легко добавить, если вам это нужно.

Вот пример на практике. Выберите любой размер шрифта и медиа-запросы, которые вы хотите.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}

как мне включить это в _type.scss, чтобы h3 реагировал так, как я хочу? мне нужно использовать функцию calc() css3? если я должен это сделать, как мне этого добиться?


css sass responsive typography twitter-bootstrap-4
person Carlos Pisarello    schedule 06.12.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете указать его по-разному. Вы можете заменить всю строку h3 в вашем _type.scss следующим и изменить значения в соответствии с вашими потребностями:

@include media-breakpoint-up(sm) {
  h3, .h3 { $font-size-base * 1.25 !default; }
}

@include media-breakpoint-up(md) {
  h3, .h3 { $font-size-base * 1.5 !default; }
}

@include media-breakpoint-up(lg) {
  h3, .h3 { $font-size-base * 1.75 !default; }
}

Лично я, как правило, не люблю изменять части фреймворка по умолчанию, поэтому вы можете легко вернуться к значениям по умолчанию. Это также может создать головную боль при обновлении позже. Поэтому я бы создал еще один частичный код с именем _custom_type.scss, добавил к нему приведенный выше код и скомпилировал его в свой CSS, просто не забудьте добавить свои пользовательские переопределения после значений по умолчанию.

person Robert Wade    schedule 06.12.2017
comment
Когда вы переопределяете что-то, просто удалите тег !default, чтобы вы знали, что вы изменили. Если переменная назначена, она не будет переназначена переменной !default. - person rubeonline; 21.12.2017