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

生成灵活的border-radius，与客户端的窗口宽度成比例。虽然，这看起来很荒谬。

如何才能实现这一目标？谢谢！

Answer 1

或许使用一点点动态，DRY（不要重复自己）用JS编码？

以下使用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查询（速度很慢）。
每次调整窗口大小时，请调用该函数。
如果窗口宽度在范围内（> 1024px），请运行代码。
通过计算必要的填充来创建border-radius字符串。
在加载时resize()触发功能。

Answer 2

媒体查询并不荒谬......使用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 3

使用％而不是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 4

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

用 clamp() 替换媒体查询

更好的替代@media查询？

4 个答案: