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实现的响应式导航
Oct 31 HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
Nov 21 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 HTML / CSS
10分钟入门CSS3 Animation
Dec 25 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
HTML中table表格拆分合并(colspan、rowspan)
Apr 07 HTML / CSS
css样式important规则的正确使用方式
Jun 10 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
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
PHP 文件缓存的性能测试
2010/04/25 PHP
PHP进程同步代码实例
2015/02/12 PHP
php浏览历史记录的方法
2015/03/10 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
Python中基本的日期时间处理的学习教程
2015/10/16 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
python调用百度REST API实现语音识别
2018/08/30 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
Python 下载及安装详细步骤
2019/11/04 Python
python 消费 kafka 数据教程
2019/12/21 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
介绍一下XMLHttpRequest对象
2012/02/12 面试题
班班通项目实施方案
2014/02/25 职场文书
党员公开承诺书
2014/03/25 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
企业投资意向书
2015/05/09 职场文书
三下乡活动心得体会
2016/01/23 职场文书
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js