我正在學習CSS,并通過使用容器查詢使我的布局具有響應性。習慣于將重復的代碼分解成函數,代碼如此重復讓我很受傷:
.sales-data-container {
font-size: 0.6em;
}
@container learning-content (min-width: 45em) {
.sales-data-container {
font-size: 0.8em;
}
}
@container learning-content (min-width: 54em) {
.sales-data-container {
font-size: 1em;
}
}
@container learning-content (min-width: 70em) {
.sales-data-container {
font-size: 1.6em;
}
}
@container learning-content (min-width: 90em) {
.sales-data-container {
font-size: 2em;
}
}
// Potentially many more queries to handle various minimal widths in the same manner
我在這里真正做的是對每一對[[45em,0.8em],[54em,1em],[70em,1.6em],[90em,2em]]重復相同的查詢。有沒有一種方法可以把這個寫得又短又好?