Как удалить класс или активировать класс только для определенного порта просмотра

Question

Не уверен, что для этого потребуется Javascript, или если есть способ сделать это только с помощью CSS.

В принципе, я хочу, чтобы класс был активным только для средних и малых размеров. Пример:

<style> 
    .big {font-size: 2em;} 
    .normal {font-size: 1em;} 
</style> 

<div class="big"> 
    <p> This text is huge on normal size screens.</p> 
</div> 

Хочет быть либо в состоянии переключить класс «.big» на мобильных/среднем целью «.Normal» или даже отключить этот класс в том размере вида порта.

Возможно ли это? Даже с любыми работами?

Answer 1

вы можете сделать что-то вроде ниже.

Добавить большой и нормальный класс в div. Но сохраните иерархию классов так.

Первый нормальный, то большой

теперь вы можете сказать, в определенном видовом сделать размер нормального: шрифт с важным значением.

<style> 
 
    .big { 
 
    font-size: 2em; 
 
    } 
 
    .normal { 
 
    font-size: 1em; 
 
    } 
 
    @media (max-width: 767px) { 
 
    .normal { 
 
     font-size: 1em !important; 
 
    } 
 
</style> 
 

 
<div class="normal big"> 
 
    <p>This text is huge on normal size screens.</p> 
 
</div>

Answer 2

можно использовать медиа-запросы на том же классе.

вот пример:

.big{ 
     background-color: red; 
    } 
@media screen and (max-width: 300px) { 
    .big{ 
     background-color: lightblue; 
    } 
} 

выписка учебник о this

Answer 3

вы можете сделать это с помощью средств массовой информации запросов:
Этот код работать со мной абсолютно на всех устройствах:

@media only screen 
    and (max-width: 320px){ 

.big {font-size: 2em;} 
    .normal {font-size: 1em;} 
} 

проверить это link для получения более подробной информации