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代码实现switch滑动开关按钮效果
Aug 30 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 HTML / CSS
HTML5的结构和语义(5):交互
Oct 17 HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 HTML / CSS
HTML5 声明兼容IE的写法
May 16 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 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
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
Python GUI布局尺寸适配方法
2018/10/11 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
python环境下安装opencv库的方法
2020/03/05 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
在校生党员自我评价
2013/09/25 职场文书
土木工程专业大学毕业生求职信
2013/10/13 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
晚会开幕词范文
2016/03/04 职场文书
Redis的字符串是如何实现的
2021/10/24 Redis