css - 如何优化媒体查询样式

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
}

您的百分比也非常精确，但实际计算的像素因浏览器而异。没什么问题，只是一个注释。