@media 查询的更好替代方案？

Question

我现在就用这个

@media (max-width: 1024px) { #icons { border-radius: 0px } }
@media (    width: 1025px) { #icons { border-radius: 1px 1px 0px 0px } }
@media (    width: 1026px) { #icons { border-radius: 2px 2px 0px 0px } }
@media (    width: 1027px) { #icons { border-radius: 3px 3px 0px 0px } }
@media (    width: 1028px) { #icons { border-radius: 4px 4px 0px 0px } }
@media (    width: 1029px) { #icons { border-radius: 5px 5px 0px 0px } }
@media (    width: 1030px) { #icons { border-radius: 6px 6px 0px 0px } }
@media (    width: 1031px) { #icons { border-radius: 7px 7px 0px 0px } }
@media (    width: 1032px) { #icons { border-radius: 8px 8px 0px 0px } }
@media (    width: 1033px) { #icons { border-radius: 9px 9px 0px 0px } }

生成灵活的边框半径，与客户端的窗口宽度成比例。不过，这看起来很荒谬。

还有什么办法可以实现这一目标呢？谢谢！

Answer 1

也许使用 JS 进行一些动态的、DRY（不要重复自己）编码？

为了方便，下面使用了jQuery。

var win = $(window);
win.resize(function() {
  if(win.width() >= 1024) {
    var padding = win.width()-1024;
    $("#icons").css("border-radius", padding + "px " + padding + "px 0px 0px");
  }
}).resize();

#icons {
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="icons">Try resizing the window to widths greater than 1024px.</div>

它能做什么：

1. 缓存$(window)以避免多个 DOM 查询（速度很慢）。
2. 每次调整窗口大小时，调用该函数。
3. 如果窗口宽度在范围内 (> 1024px)，则运行代码。
4. border-radius通过计算必要的填充来制作字符串。
5. resize()带负载触发功能。