媒体类型:

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,都忽略样式

最新文章

  1. python实现从生成器中取固定角标的元素
  2. openstack新建虚机、网络、路由时候对应的ovs网桥的变化
  3. 多线程调用WebClient速度变慢的问题
  4. Android项目实战(六):JazzyGridView和JazzyListView的使用
  5. WDCP安装并配置php5.4和mongodb
  6. HDU3466背包01
  7. Dev gridControl z
  8. 纯JS画点、画线、画圆的方法
  9. msp时钟设置程序
  10. windows内核初窥(二)-----系统机制
  11. [TYVJ] P1023 奶牛的锻炼
  12. C++杂分析
  13. XFS文件系统的备份和恢复
  14. 20)django-session使用
  15. Oracle启动关闭
  16. Arch Linux中通过AUR安装Redis Desktop Manager失败
  17. powerdessigner使用教程
  18. HTML 背景实例
  19. [BZOJ2957] [THU2013集训] 楼房重建
  20. 第一个驱动之字符设备驱动(二)mdev

热门文章

  1. apache hide index.php
  2. day5_python学习笔记_chapter7_字典
  3. [暂停一天]从零开始PHP学习 - 第六天
  4. eclipse 插件安装
  5. 【高级】C++中虚函数机制的实现原理
  6. Codeforces 427D Match &amp;amp; Catch(后缀自动机)
  7. gallery 从最左边开始显示并且默认选中第一个
  8. 使用 system.io.filesysteminfo 来查找文件。
  9. Object-c中@private、@protected、@public解析
  10. C#中两个整数相除得到带小数点的结果