如何優化媒體查詢風格

Question

我重複了我的媒體查詢測試中的樣式，但不知道如何在不重複相同樣式的情況下優化樣式。

這裏是我的樣品款式

@media screen and (min-width: 1261px) and (max-width: 1340px) { 
    .wishlist-wrap {width:24.5245901639%} 
    .info-wrap {width:24.262295081%} 
    .meta-menu-wrap {width:28.86885245%} 
    .nav-head > ul > li {padding-right:1.8823529411%;} 
} 

@media screen and (min-width: 1211px) and (max-width: 1260px) { 
    .wishlist-wrap {width:20.5245901639%} 
    .info-wrap {width:25.262295081%} 
    .nav-head > ul > li {padding-right:2.8823529411%;} 
    .meta-menu-wrap {width:30.86885245%} 
} 

@media screen and (min-width: 1181px) and (max-width: 1210px) { 
    .wishlist-wrap {width:20.5245901639%} 
    .info-wrap {width:26.262295081%} 
    .nav-head > ul > li {padding-right:2.8823529411%;} 
    .meta-menu-wrap {width:30.86885245%} 
} 

@media screen and (min-width: 1080px) and (max-width: 1180px) { 
    .wishlist-wrap {width:20.5245901639%} 
    .info-wrap {width:28.262295081%} 
    .logo-wrap {width:14.68852459%;} 
    .meta-menu-wrap {width:30.86885245%} 
    .nav-head > ul > li {padding-right:2.0823529411%;font-size:13px} 
    .panel-primary { padding: 6px 36px 10px 20px;} 
} 

Answer 1

你可以設置它像這樣

CSS

normal css 

media querys (use max-width only, don't limit it to a min - max) { 
    // override what you need to only 
} 
media querys { 
    // override what you need to only 
} 

比如你有

.meta-menu-wrap {width:30.86885245%} 

反覆幾次後，如果你剛纔定義了這個在XXX，它不限制範圍內的最大寬度，那麼你就不需要重新定義它的屏幕較小，直到你需要再次改變它

.meta-menu-wrap { width:28.86885245% } 

@media screen and (max-width: 1260px) { 
    .meta-menu-wrap { width:30.86885245% } 
} 

@media screen and (max-width: 1210px) { 
    // no need to do it again here 
} 

@media screen and (max-width: 1180px) { 
    // no need to do it here 
} 

而且你的百分比是相當準確的。然而實際計算的像素會因瀏覽器而異。沒有錯，但只是一個音符。

Answer 2

由於Huangism說你應該在@ media-querys之外提供基本風格，並且在線覆蓋它們中的必要風格。

除此之外，你可以看看http://lesscss.org/或http://sass-lang.com/它們都允許定義變量和函數類型的元素，並允許使用數學公式來計算大小。這有助於構建你的CSS，並且很容易學習。

短少例如：

.insertWidths(@size){ 
    .wishlist-wrap { width: **formula_dependent_on_size** } 
    .info-wrap { ... } 
    .nav-head > ul > li { ... } 
    .meta-menu-wrap { ... } 
} 

@media screen and (max-width: 1260px) { 
    .insertWidths(1260); 
} 

@media screen and (max-width: 1210px) { 
    .inserWidths(1210); 
} 

@media screen and (max-width: 1180px) { 
    .inserWidths(1180) 
} 

希望幫助，最好的問候
路德維希