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

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

如何优化媒体查询样式

2 个答案: