Bootsrap - изменить размер шрифта для sm устройств

Т.е. можно ли увеличить размер шрифта для чисто sm устройств в сетке, а для остальных оставить как есть по умолчанию?

Если мне память не изменяет, бутстрап на em единицах. В этом случае просто меняешь размер шрифта на body, на нужной тебе ширине. Ну допустим 768:

Код:

@media screen and (max-width:768px){    body {      font-size: 24px;   } }

Можно импортант влепить для уверенности)


added: вместо body может будет работать с html, честно - не помню, обычно все же задача ювелирно размеры настраивать, а не массово их менять)

Последний раз редактировалось: sk://ed (27/11/17 в 12:44), всего редактировалось 1 раз

Предположу, что через свойства @media для этого размера. т.е. вставить в эту @media {} свой размер шрифта.

ЗЫ пока писал, ответили уже

Думал у бутстрапа есть свои тулзы типа как для сетки.

Есть, почему нет.
Смотри переменные _variables.scss
Там раздел fonts
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$font-size-lg: 1.25rem !default;
$font-size-sm: .875rem !default;
$font-size-xs: .75rem !default;

4 бутстрап если что.

Smarty: ну это вроде же компилятся дефолтные шоифты для каждого устройства.
Может я не точно выразился. Надо так: У меня есть ячейка в которой и только в ней надо увеличить шрифт, когда устройство sm откроет страницу. Т.е. должно быть что-то типа
<div class="font-size-sm-increase-2 col-sm-..."></div>, где font-size-sm- - это детектится размер экрана, а -increase-2 - это вымышленый множитель размера шрифта.
или так
<div class="font-size-sm-xlarge col-sm-..."></div>

Ну а когда браузер вернётся в md,lg.. или ещё больше сузится до xs, то шрифт этой ячейки переключается в дефолтный.

S_Flash: чтобы у тебя получилось то, что ты хочешь тебе нужно назначить дефолтный размер шрифта для контейнера в котором ты собрался менять. И нужно чтобы вложенные элементы были в em единицах.

Затем на этот контейнер уже применять медиа, в котором менять размер шрифта. Изменение отразится на размере шрифта вложенных в контейнер элементов, если они в em.

https://jsfiddle.net/e8w8zkk8/ (сожми в 768, увидишь о чем я).

Если вопрос был в том, есть ли это дефолтом в бутстрапе? - я сомневаюсь, но я никогда не был его большим фанатом, могу ошибаться.

sk://ed: ок, я просто знаю как это среализовать на чистом css. Вопрос именно не выходить за рамки бутстрапа. Так по чуть-чуть лепишь на него костылики, а, затем, пробуешь поменять тему и всё рухнуло к ебеням!

Чтобы не выxодить за рамки Б лучше посмотреть туторы на сайте самого Б и пару обучалок чтобы систематизировать знания.
А что касается твоей идеи. Систему гридов Б можно посмотреть в файле bootstrap-grid.css /ну либо в полном файле Б/ Из него видно как строятся гриды.
Пример кода

Код: [развернуть]

.col-1 {   -webkit-box-flex: 0;   -webkit-flex: 0 0 8.333333%;       -ms-flex: 0 0 8.333333%;           flex: 0 0 8.333333%;   max-width: 8.333333%; } .col-2 {   -webkit-box-flex: 0;   -webkit-flex: 0 0 16.666667%;       -ms-flex: 0 0 16.666667%;           flex: 0 0 16.666667%;   max-width: 16.666667%; } .col-3 {   -webkit-box-flex: 0;   -webkit-flex: 0 0 25%;       -ms-flex: 0 0 25%;           flex: 0 0 25%;   max-width: 25%; }

То есть все классы col-md-1, col-xl-3 и т.д. описаны в нем явно. Значит и твои манипуляции со шрифтами нужно будет прописать в своем плагине в явном виде для разныx вариантов media /как правильно написал sk://ed/.
Но чтобы не костылить такую систему можно пользоваться иерарxией классов /правильнее конечно назвать это иерарxией html элементов/.
Что то типа

Код: [развернуть]

.input-group-sm > .input-group-btn > .btn {   padding: 0.25rem 0.5rem;   font-size: 0.875rem;   border-radius: 0.2rem; }

Так реализуется уменьшение шрифта в кнопкаx для small дисплеев.
У тебя это может быть что то типа container->row->col-sm-3 = font-size: 0.5rem; Но прописывать такое для всей грид системы конечно будет очень громоздко, поэтому нужно исxодить из задачи и здравого смысла.