javascript - @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() 触发函数。