Как СУХОЙ медиазапросы

Question

У меня есть два медиа-запросов, которые имеют те же свойства: .css

@media only screen and (max-width: 320px) { 
    h2 { 
     font-size: 3rem; 
     line-height: 3.5rem; 
    } 
    .slider h3 { 
     font-size: 2.5rem; 
     line-height: 2.5rem; 
    } 
    .col .wrapper { 
     padding: 3rem; 
    } 
} 
@media only screen and (max-width: 480px) { 
    h2 { 
     font-size: 3rem; 
     line-height: 3.5rem; 
    } 
    .slider h3 { 
     font-size: 2.5rem; 
     line-height: 2.5rem; 
    } 
    .col .wrapper { 
     padding: 3rem; 
    } 
} 

Что я должен сделать, чтобы высушить их? Я пробовал:

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

и не работал. Также пробовал:

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

и не работает. Любая помощь? Благодарю.

Answer 1

, так как они оба содержат точно те же объявления CSS, в чем смысл их обоих?

Просто избавитесь от @media only screen and (max-width: 320px){...}, и все должно быть в порядке.

Оставшиеся @media only screen and (max-width: 480px){...} объявления будут автоматически применены ко всем ширинам до 480 пикселей (это включает 320 пикселей, так как 320 пикселей < 480 пикселей).

Answer 2

Вы можете просто использовать последний, так как они так же, CSS и запрос СМИ (max-width: 480px) до сих пор поражает резолюции 320px и ниже

Так что вам нужно только это:

@media only screen and (max-width: 480px) { 
    h2 { 
     font-size: 3rem; 
     line-height: 3.5rem; 
    } 
    .slider h3 { 
     font-size: 2.5rem; 
     line-height: 2.5rem; 
    } 
    .col .wrapper { 
     padding: 3rem; 
    } 
}