我想在寬度更改期間將一個類設定為一個元素，具體取決于瀏覽器寬度是加寬還是變窄。如果縮小，則元素接收第一類；如果加寬，第二個。
<--- | ---> 類 =“加寬”
如果可以的話，我的首選是 CSS，否則，JavaScript（或兩者的組合）。我不知道如何解決這個問題，我只知道 CSS 媒體查詢沒有給我我想要的。
uj5u.com熱心網友回復：
您可以使用@media。檢查螢屏大小，設定 2 個 @media 規則。在每個規則中，您可以更改同一類的 CSS 屬性。
uj5u.com熱心網友回復：
您可以使用 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: 700px)")
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。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/353766.html
標籤：javascript css 媒体查询 反应灵敏 断点
下一篇：如何在html中顯示多個常量？