如何优化媒体查询风格

我重复了我的媒体查询测试中的样式，但不知道如何在不重复相同样式的情况下优化样式。如何优化媒体查询风格

这里是我的样品款式

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

来源

2014-03-27 user1592129

hhmmmm .....所有的好。但bootstrap更好 –

你可以设置它像这样

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 
}

而且你的百分比是相当准确的。然而实际计算的像素会因浏览器而异。没有错，但只是一个音符。

来源

2014-03-27 13:35:52 Huangism

由于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) 
}

希望帮助，最好的问候
路德维希

来源

2014-03-27 14:36:41 DrLudwig3

如何优化媒体查询风格

回答

相关问题