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

生成灵活的边框半径，与客户端的 window 宽度成比例。虽然，这看起来很荒谬。

还有什么方法可以做到这一点？谢谢！

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>

它的作用：

缓存 $(window) 以避免多次 DOM 查询（很慢）。
每次 window 调整大小，调用该函数。
如果 window 宽度在范围内 (> 1024px)，运行代码。
通过计算必要的填充来生成 border-radius 字符串。
加载 resize() 时触发函数。

Answer 2

使用 % 而不是 px。您可以指定 border-radius 的百分比值。

您也可以使用 Javascript:

     bordervalue = window.innerWidth.toString().split('').pop();
     /*here you can modify border value as you wish*/
     document.getElementById("icons").style.borderRadius=bordervalue + "px " + bordervalue + "px 0px 0px";

Answer 3

媒体查询并不可笑...用 JS 代替它们是可笑的，尤其是在 2016 年。

@media (max-width: 1024px) { #icons { border-radius: 0px } }

@media (min-width: 1025px and max-width: 1033px) {
  #icons {
    border-radius: calc(100vw - 1024px) calc(100vw - 1024px) 0px 0px;
  }
}

@media (min-width: 1034px) {
  #icons {
    border-radius: 10px;
  }
}

这应该可以完成工作。

Answer 4

从 2019 年 12 月到 2020 年 4 月，浏览器都在 CSS 中添加了对名为 clamp( ) 的新方法的支持。

将媒体查询替换为 clamp()

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

Better alternative to @media queries?

html

javascript

css

jquery

media-queries