Почему уменьшается шрифт для девайсов xl в bootstrap?

Question

[georgedubinsky8888]

Здраствуйте, начал изучать Bootstrap. Хотел сделать маленький макет он должен выглядеть вот так:

Вот код:
index.html:

<div class="container">
       <div class="row">
        <div class="col-xl-12 col-sm-12 col-md-12">Хедер</div>
        </div>
    </div>

styles.less:

@green:green;
@black:black;
@white:white;

.container{
    background: @green;
    width: 1000px;
    height: 2000px;
}

.col-xl-12, .col-sm-12, .col-md-12{
    background: @black;
    width: 1000px;
    height: 100px;
    margin: 0px;
    color:@white;
    font-size:50px;
    text-align: center;
}

Но мне нужно чтобы на смартфоне и планшете у надписи "Хедер" размер шрифта уменьшился до 25 px и я дописал вот это в styles.less:

.col-sm-12, .col-md-12{
   font-size:25px;
}

Но когда я написал этот код то у меня и на мониторе компьютера уменьшился шрифт до 25 px, а мне так не нужно, мне нужно чтобы на мониторе компьютера было 50px. Как тогда мне написать код?

Answer 1

[Andrew]

Штудируйте

Comments

[georgedubinsky8888]

При чем здесь Media Query? Я умею делать Responsive на css. Но в bootstrap есть своя адаптивнось в которой не нужно пропиисивать Media Query.

[its2easyy]

georgedubinsky8888,

.col-sm-12, .col-md-12{
   font-size:25px;
}

размер шрифта уменьшился до 25 px

правильно, зачем читать как работает технология которую вы используете, зачем читать документацию по фреймворку, можно же просто делать какую то дичь и жаловаться что она не работает как вам хочется

[georgedubinsky8888]

its2easyy, тоесть на boostrap в зависимости от девайса можно изменять только ширину блоков, написанием в названия xs, sm и т.д.? А что б изменить шрифт нужно использовать дополнительно Media Query css?

[Andrew]

georgedubinsky8888, вы классы написали, они работают всегда, задают ширину при определенных разрешениях, вы написали фсайзу 25 пикселей всегда, соответственно он и остаётся таким.
Пропишите медиа запрос каким должен быть размер шрифта при других разрешениях и будем вам счастье. Причем тут бутстрап к вашей проблеме? Вот и я не знаю.
Да, есть еще другие единицы измерения шрифта, но это уже совсем другая история.

[georgedubinsky8888]

Andrew, спасибо) я просто думал что bootstrap реализует полностью адаптивность, тоесть думал что если прописать col- то можно и размер шрифта менять в зависимости от девайса, и менять значение display, например с inline на block, и т.д. а получается в bootstrap только ширину блоков можно менять и все...

[Andrew]

georgedubinsky8888, вы можете взять их стили и переиначить под себя, но так запутаетесь, сделайте классы под себя и уже им через медиа задавайте, что хотите