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 --- 使用媒体查询当屏幕宽度小于某个值时,隐藏掉某个类相关推荐

媒体查询中“屏幕”和“仅屏幕”之间有什么区别？
本文翻译自:What is the difference between "screen" and "only screen" in media queries ...
CSS：媒体查询 CSS3 Media Queries
定义和使用使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. ...
android 媒体查询,CSS常用媒体查询应用
原标题:CSS常用媒体查询应用媒体类型媒体类型 sans - serif字体比较适合在屏幕上阅读,而 serif 字体更容易在纸上阅读. 媒体查询包含一个可选的媒体类型和零个或多个满足CSS3规范 ...
计算机常用屏幕分辨率,pc端常用电脑屏幕（(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）...
PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.1 ...
前端CSS @media 媒体查询PC端
前端CSS @media 媒体查询PC端注意and后面跟一个空格 @media screen and (min-width: 1024px){body{font-size: 12px} } /*&g ...
【css】媒体查询（总结）
[css]媒体查询文章目录 [css]媒体查询写在前面媒体查询: 一.认识viewport 二.关于三个viewport的理论 layout viewport(布局视口) visual view ...
CSS媒体查询：最大宽度或最大高度
本文翻译自:CSS media queries: max-width OR max-height When writing a CSS media query, is there any way yo ...
CSS Media媒体查询
媒介类型在CSS2中,媒体查询只使用于<style>和<link>标签中,以media属性存在 media属性用于为不同的媒介类型规定不同的样式 screen 计算机屏幕(默 ...
深入理解CSS Media媒体查询
前面的话一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...

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

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

最新文章

热门文章