我有这段代码:
@media screen and (max-width: 570px) {
#header {
.flex-wrap(wrap);
.justify-content(center);
#headerTitles {
margin-top: 1rem;
}
}
}
@media screen and (min-width: 571px) and (max-width: 950px) {
#header.authenticated {
.flex-wrap(wrap);
.justify-content(center);
#headerTitles {
margin-top: 2rem;
}
}
}
有没有一种方法可以使用JavaScript(而不是jQuery)来动态添加或删除类到<div>元素中,以表示两种不同的大小,然后将其重写为类似于以下内容:
.small #headerTitles { margin-top: 1rem; }
.large #headerTitles { margin-top: 2rem; }
如果这个方法可行,那么有人可以评论一下是否使用JavaScript是更好的方法吗?