這個代碼可以用較少的媒體查詢完成嗎？

這似乎是非常重複的，有沒有一種方法可以將此結合起來，以便我不必一次又一次地寫入.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; 
    } 
}

來源

2017-01-22 Timmy Von Heiss

您是否嘗試過使用視單位爲你調整頁面大小自動縮放？ –

或CSS預處理器？ – jonrsharpe

略微簡化的版本（少了一個媒體查詢）：

.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; } }

來源

2017-01-22 17:18:08

不，因爲那是您如何編寫CSS規則以及它們如何工作。減少輸入的唯一方法可能是使用CSS預處理器，如SASS，這樣可以減少某些輸入，但可能不會使處理後的CSS看起來有任何不同。

來源

2017-01-22 17:16:54 Rob

這個代碼可以用較少的媒體查詢完成嗎？

回答

相關問題