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

【问题标题】：Better alternative to @media queries?@media 查询的更好替代方案？
【发布时间】：2016-12-13 04:14:11
【问题描述】：

我现在正在用这个，

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

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

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

【问题讨论】：

标签： javascript jquery html css media-queries

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

【讨论】：

我在line 5、$("#icons")... 上添加了右括号，错误显示为Unexpected string literal " + ". Expected ')' to end a argument list.
@zaydek 已编辑。很抱歉给您带来不便。
谢谢好的。我更正了它，但上面的错误代码仍然显示相同的消息。
@zaydek 再次尝试整个代码。我没有收到任何错误。
哦，有趣，酷。谢谢！我注意到如果窗口调整得太快，即在桌面互联网客户端上，它不会调整大小。客户端应用程序似乎需要一些毫秒来刷新，否则它会跳过。

【解决方案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;
  }
}

这应该可以完成工作。

【讨论】：

效果很好。最大10px border-radius1034+ px 和最小0px at 1024- px 的预期效果怎么样，这样从1024 到1034 的每个px 都会在border-radius 中添加一个px？
max-width: 1024px 规则已经支持最小值。只需为min-width: 1025px：@media (min-width: 1025px and max-width: 1034px) 添加另一个，第三个在 1035px 之后始终保持 10px
谢谢，但我不明白。 @meda (min-width: 1025px) { ... } @media (max-width: 1034px) { ... }?

【解决方案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";

【讨论】：

例子？还有% 什么？宽度？谢谢。
@zaydek 如果浏览器屏幕的宽度为 1000px，并且您设置了border-radius: 1% 1% 0px 0px，则等于border-radius:10px 10px 0px 0px。现在，如果你希望它在 1000px 时为 1px，border-radius:0.1% 0.1% 0px 0px 就可以了。你现在明白了吗？
有点，但我的目标是，即 999px 宽度的 9px，所以它需要一些额外的数学，因为。而不是百分比，它可能类似于拉宽度的最后一位数字，即 9 在 990 到 1000 的给定范围内。如果我没有误解的话。谢谢。
@zaydek 检查我的答案以使用 javascript 来完成。

【解决方案4】：

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

将媒体查询替换为clamp()

【讨论】：