元素的类可以根据浏览器是加宽还是缩小而改变？
Posted
技术标签:
【中文标题】元素的类可以根据浏览器是加宽还是缩小而改变？【英文标题】：Can an element's class change depending on whether browser is widened or narrowed? 【发布时间】：2021-12-21 19:09:26 【问题描述】：我想在宽度更改期间为元素设置一个类，具体取决于浏览器宽度是加宽还是变窄。如果变窄，则元素接收第一类；如果加宽，则为第二个。
class="加宽"
如果可以，我的首选是 CSS，否则，javascript（或两者的组合）。我不知道如何解决这个问题，我只知道 CSS 媒体查询并没有给我我想要的。
【问题讨论】：
@media 对 CSS 有帮助
从技术上讲，窗口大小仅在绘制时重新计算。所以它从来没有真正“缩小”或“增长”，它总是只是“处于给定状态”。如果您在最后一次计算发生之前停止调整窗口大小，则状态将不再改变。所以有这样一个“运动状态”是真的无法定义的。你当然可以在 JS 中定义你的，通过确定最后一个事件之后的合理时间量来决定它不再移动，从而确定在此间隔期间它是增长、缩小还是停滞。
谢谢，Kaiido，我也这么想。我只是希望有人知道我不知道的事情。
【参考方案1】：
您可以使用@media。检查屏幕大小，设置 2 个@media 规则。在每个规则中，您都可以更改同一类的 CSS 属性。
【讨论】：
正如我所提到的，这是行不通的。 @media 不知道窗口是变窄还是变宽；仅当宽度在指定范围内时才会响应。【参考方案2】：您可以使用 JavaScript matchMedia 方法如下：
function changeClass(x)
if (x.matches) // If media query matches
document.getElementById("myDiv").classList.add("narrow");
document.getElementById("myDiv").classList.remove("widen");
else
document.getElementById("myDiv").classList.remove("narrow");
document.getElementById("myDiv").classList.add("widen");
var x = window.matchMedia("(max-width: 900px) and (min-width: 400px)")
changeClass(x) // Call listener function at run time
x.addEventListener("change", () =>
changeClass(x);
);.narrow
color: red;
.widen
color: rgb(45, 230, 45);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="myDiv">
this is the div
</div>
<script src="myCode.js"></script>
</body>
</html>如果浏览器宽度大于 700px，则将类更改为 .widen，如果小于 700px，则更改类到.narrow。
【讨论】：
您的示例适用于 2 个断点，但如果有 3 个或更多断点则不能。考虑 3 个宽度：x-small: 0 - 300px —— small: 301px - 600px —— medium: 601px - 900px。当从 900px 调整到 400px 时，我希望将一个不同的类应用于元素，而不是从 100px 调整到 400px 时。我希望我描述这个概念的能力是足够的。 @metaplast 我编辑了代码，在400px to 900px 之间给出了.narrow 类，之前和之后给出了.widen 类。但我建议阅读this link 中的示例，以更好地了解可以在 matchMedia 方法中设置的条件。
我可能没有尽我所能雄辩地解释这一点。我不想仅仅将一个元素设置为 400px 到 900px 之间的 .narrow。我已经可以使用@media 规则做到这一点。相反，当浏览器宽度达到400px to 900px 之间的任意位置时，在页面放大（即加宽）后，div 将变为class=“widen”。但是，如果页面被缩小（即缩小）到那个相同的宽度（400px - 900px），相同div得到class=“narrow” 代替（为清楚起见使用大写字母）。正如@Kaiido 解释的那样，我想要的东西是不可能的，这对我来说听起来很合理。以上是关于元素的类可以根据浏览器是加宽还是缩小而改变？的主要内容，如果未能解决你的问题，请参考以下文章