Может ли этот код выполняться с меньшими медиа-запросами?

Question

Это кажется очень повторяющимся, есть способ, которым я могу объединить это, так что мне не нужно писать .more-photos a и @media снова и снова?

@media (min-width: 768px) and (max-width: 1199) { 
    .more-photos a { 
    font-size: 14px; 
    } 
} 

@media (max-width: 768px) { 
    .more-photos a { 
    font-size: 16px; 
    } 
} 

@media (min-width: 1200px) { 
    .more-photos a { 
    font-size: 22px; 
    } 
} 

Answer 1

Немного упрощенная версия (один меньше медиа-запрос):

.more-photos a { font-size: 22px; } 

@media (max-width: 1199px) { .more-photos a { font-size: 14px; } } 

@media (max-width: 768px) { .more-photos a { font-size: 16px; } } 

Answer 2

Нет, потому что вы пишете правила CSS и как они работают. Единственный способ уменьшить количество ввода может состоять в использовании предварительного процессора CSS, такого как SASS, который облегчает некоторую типизацию, но не может заставить ваш обработанный CSS выглядеть иначе.