我想检查屏幕的大小,并根据屏幕的大小切换一个类。
Html
<div id="item" class="test"></div>脚本
window.addEventListener("load", toggleClass);
window.addEventListener("resize", toggleClass);
function toggleClass() {
var w = window.innerWidth;
item = document.getElementById("item");
if ( w > 700 ) {
item.classList.remove("test");
}else {
if ( item.classList.contains("test")) {
}else {
item.classList.add("test");
}
}
}发布于 2019-07-01 09:09:08
另一种方法-而不是在较小的尺寸上添加类-使用媒体查询来应用您想要的样式-显然,如果您将该类用于样式以外的目的-此方法可能不起作用-但如果您所做的只是根据屏幕的宽度设置元素的样式-那么媒体查询就是您的朋友。
这种方法的好处(如果你正在做纯粹的样式更改)是不需要js的-浏览器将自动使用媒体查询匹配的任何样式。这对于性能更好,因为re不需要运行js。
@media screen and (max-width: 699px) {
p {
font-size: 14px
}
}
@media screen and (min-width: 700px) {
p {
font-size: 16px
}
}https://stackoverflow.com/questions/56829027
复制相似问题