このコードは、少ないメディアクエリでも実行できますか？

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

少し簡略化されたバージョン（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ルールの作成方法と動作方法です。タイピングを少なくする唯一の方法は、SASSなどのCSSプリプロセッサを使用することです。これはタイピングを緩和しますが、処理されたCSSの外観を変えることはできません。