CSS3媒体查询(Media Queries)介绍


Posted in HTML / CSS onSeptember 12, 2013

媒体类型
all 所有设备
screen 电脑显示器
handheld 便携设备
tv 电视类型设备
print 打印用纸打印预览视图

关键字
and
not(排除某种设备)
only(限定某种设备)

媒体特性
媒体特性共13种,可以说是一个类似CSS属性的集合。其中的大部分接受 min/max 的前缀,用来表示 大于等于/小于等于 的逻辑。
CSS3媒体查询(Media Queries)介绍 
and
示例如下所示:
@media screen and (min-width: 800px) {样式代码} >800
@media screen and (min-width: 600px) and (max-width: 800px) {样式代码} 600
@media screen and (max-width: 600px) {样式代码} <600

外部样式表引用方式:
上面将设备分成3种,分别是宽度大于800px时,应用styleA,宽度在600px到800px之间时应用styleB,以及宽度小于600px时应用styleC。

not 和all
@media not handheld and (color){样式代码} //用于除便携之外的其他设备或非彩色便携设备中
@media all and (not color){样式代码} //用于所有非彩色设备中

only
only 关键字可能显得有些多余,对支持Media Queries的浏览器来说确实是这样,但很多时候only是用来对那些不支持Media Queries但是却读取Media Type的设备隐藏样式表的
@media only screen add (color){样式代码}
支持Media Queries的设备,正确应用样式,就仿佛only不存在
不支持Media Queries但正确读取Media Type的设备,由于先读取到only而不是screen,将忽略这个样式
不支持Media Queries的IE不论是否有only,都忽略样式

HTML / CSS 相关文章推荐
CSS3动画之利用requestAnimationFrame触发重新播放功能
Sep 11 HTML / CSS
使用css3制作动感导航条示例
Jan 26 HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 HTML / CSS
HTML5 新事件 小结
Jul 16 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
Sep 11 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 #HTML / CSS
css3进行截取替代js的substring
Sep 02 #HTML / CSS
CSS3制作ajax loader icon实现思路及代码
Aug 25 #HTML / CSS
css3学习心得分享
Aug 19 #HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 #HTML / CSS
css3实现背景图片拉伸效果像桌面壁纸一样
Aug 19 #HTML / CSS
发现两个有趣的CSS3动画效果
Aug 14 #HTML / CSS
You might like
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
PHP判断远程图片是否存在的几种方法
2014/05/04 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
Python基础教程之利用期物处理并发
2018/03/29 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
Python装饰器用法与知识点小结
2020/03/09 Python
python定义类的简单用法
2020/07/24 Python
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
Noon埃及:埃及在线购物
2019/11/26 全球购物
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
应届毕业生求职信范文
2013/12/18 职场文书
自我鉴定 电子商务专业
2014/01/30 职场文书
校园文化标语
2014/06/18 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python