CSS：是否有更短的方法来编写多个媒体查询？

Question

这是我写出来的代码，但是必须有一种更简洁、优雅、有效的方法来编写用于缩放屏幕的媒体查询，对吗？

selector { padding-left: 19% }

@media only screen and (min-width: 1300px) {
  selector { padding-left: 17% }
}

@media only screen and (min-width: 1420px) {
  selector { padding-left: 17% }
}

@media only screen and (min-width: 1480px) {
  selector { padding-left: 16.5% }
}

@media only screen and (min-width: 1520px) {
  selector { padding-left: 16% }
}

@media only screen and (min-width: 1585px) {
  selector { padding-left: 15.5% }
}

@media only screen and (min-width: 1620px) {
  selector { padding-left: 15% }
}

@media only screen and (min-width: 1720px) {
  selector { padding-left: 14% }
}

@media only screen and (min-width: 1820px) {
  selector { padding-left: 13% }
}

@media only screen and (min-width: 1920px) {
  selector { padding-left: 12% }
}

Answer 1

您可以组合相似的值并减少 最后一组媒体查询，填充值有一点变化，所以我使用

calc()

函数来处理它。

@media only screen and (min-width: 1300px) {
  selector { padding-left: 17% }
}

@media only screen and (min-width: 1420px),
       only screen and (min-width: 1480px) {
  selector { padding-left: 16.5% }
}

@media only screen and (min-width: 1520px),
       only screen and (min-width: 1585px),
       only screen and (min-width: 1620px) {
  selector { padding-left: 16% }
}

@media only screen and (min-width: 1720px),
       only screen and (min-width: 1820px),
       only screen and (min-width: 1920px) {
  selector { padding-left: calc(14% - 1%); }
}