如何在不同分辨率之间切换类

Question

如何在不同的屏幕分辨率下更改类操作。 例如我有

<div class="on-big on-small"></div>

所以on-big会一直工作到1024 pixels，而on-small低于1024 pixels

我只想将所有属性设置为0或none，例如布丁/边距等，或者使用媒体查询ofc的！important属性制作它们。但我认为这是一个糟糕的做法

Answer 1

这将使您开始使用（移动优先）媒体查询的概念。你隐藏了.on-big容器＆＃34;默认情况下＃34;然后只显示超过1024像素的分辨率：

.on-big {display：none}

@media (min-width: 1024px) {
 .on-big {display: block}
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries更详细地解释了这一点

Answer 2

使用媒体查询......这是一个示例代码

<div class="md"></div>
@media (max-width:1024px) {
 .md{
 //do your thing for small devices
  }
}

@media (min-width: 1024px) {
 .md{
  //do your thing for big devices
  }
}