CSS3媒体查询(Media Queries)
媒体类型:
all 所有设备
screen 电脑显示器
handheld 便携设备
tv 电视类型设备
print 打印用纸打印预览视图
关键字
and
not(排除某种设备)
only(限定某种设备)
媒体特性:
媒体特性共13种,可以说是一个类似CSS属性的集合。其中的大部分接受 min/max 的前缀,用来表示 大于等于/小于等于 的逻辑。
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,都忽略样式
最新文章
- python实现从生成器中取固定角标的元素
- openstack新建虚机、网络、路由时候对应的ovs网桥的变化
- 多线程调用WebClient速度变慢的问题
- Android项目实战(六):JazzyGridView和JazzyListView的使用
- WDCP安装并配置php5.4和mongodb
- HDU3466背包01
- Dev gridControl z
- 纯JS画点、画线、画圆的方法
- msp时钟设置程序
- windows内核初窥(二)-----系统机制
- [TYVJ] P1023 奶牛的锻炼
- C++杂分析
- XFS文件系统的备份和恢复
- 20)django-session使用
- Oracle启动关闭
- Arch Linux中通过AUR安装Redis Desktop Manager失败
- powerdessigner使用教程
- HTML 背景实例
- [BZOJ2957] [THU2013集训] 楼房重建
- 第一个驱动之字符设备驱动(二)mdev
热门文章
- apache hide index.php
- day5_python学习笔记_chapter7_字典
- [暂停一天]从零开始PHP学习 - 第六天
- eclipse 插件安装
- 【高级】C++中虚函数机制的实现原理
- Codeforces 427D Match &;amp; Catch(后缀自动机)
- gallery 从最左边开始显示并且默认选中第一个
- 使用 system.io.filesysteminfo 来查找文件。
- Object-c中@private、@protected、@public解析
- C#中两个整数相除得到带小数点的结果