Создайте персонализированный класс CSS только для одного экрана в Bootstrap

Question

Я создал персонализированный CSS класс. Я хотел бы знать, как я могу использовать этот класс только на одном экране (например, см), а не на других. Я использую bootstrap. У моего класса есть свойство font-size 2.9vw, и оно идеально подходит для экранов sm, но оно настолько велико для экранов md или lg. Я не хочу использовать медиа-запросы, потому что это задача bootstrap. Могу ли я использовать xs, md, lg ... со своим собственным классом в bootstrap? Что я могу сделать, чтобы решить это, пожалуйста?

Answer 1

Вы можете синхронизировать c ваш класс с сеткой bootsrap 4. Используйте это с вашим классом

.your-class {font-size 2.9vw}   

@media (min-width: 576px) {
    /*sm equivalent*/
    /*put your class here*/
}
@media (min-width: 768px) {
    /*md equivalent*/
    /*put your class here*/
} 
@media (min-width: 992px) {
    /*lg equivalent*/
    /*put your class here*/
    .your-class {font-size 1.9vw}
} 
@media (min-width: 1200px) {
    /*xl equivalent*/
    /*put your class here*/
}

ОБНОВЛЕНО

Для решения Bootstrap only-no-media вам придется клонировать ваш элемент с тем же содержимое типа

<style>
.my-class-1 {font-size 2.9vw}
.my-class-2 {font-size 1.9vw} 
</style>
<!-- Visible only on xl -->
<div class="my-class-1 d-none d-xl-block">My text</div>
<!-- Hidden only on xl -->
<div class="my-class-2 d-xl-none">My text</div>

Подробнее о bootstrap 4 дисплей . Но использование media - более привлекательный способ.