css --- 使用媒体查询当屏幕宽度小于某个值时,隐藏掉某个类

Bootstrap提供了一个封装好的类:

.hidden-xs: 当屏幕宽度<768px时隐藏
.hidden-sm: 当屏幕768px <= 宽度<992px时隐藏
.hidden-md: 当屏幕992px<= 宽度<1200px时隐藏
.hidden-lg: 当屏幕宽度>1200px时隐藏

下面使用css3的 媒体查询来实现:

@media screen and (max-width: 768px) {.hidden-xs{display: none;} }@media screen and (min-width: 768px) and (max-width:992px) {.hidden-sm {display: none;} }@media screen and (min-width: 992px) and (max-width:1200px) {.hidden-md {display: none;} }@media screen and (min-width: 1200px) {.hidden-lg {display: none;} }

总结

以上是生活随笔为你收集整理的css --- 使用媒体查询当屏幕宽度小于某个值时,隐藏掉某个类的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。