media type -- 媒体类型

media type是css2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。下面要说到css3中的media query是对media type的一种增强。

media type的种类：

• all -- 适用于所有设备

• print -- 用于打印机

• screen -- 适用于彩色电脑显示器（也包括手机、iPad等手持设备）

• speech -- 用于语音类型

注意：CSS2.1和CSS3 media query定义了tty, tv, projection, handheld, braille, embossed, aural这些media type，但是它们在media query 4 中都废弃了，所以不推荐使用了

media type的使用方法：

第一种：<link> 标签的media属性

<link href="style.css" media="screen print" ...

第二种：<style> 标签的 media 属性

<style media="all" type="text/css">
    p{
        color: #ff0000
    }
</style>

第三种：@import方式

<style>
    @import url("xxx.css") "screen,print";
</style>

第四种：在style里为某些样式指定 media

@media speech {
    p{
        color: #ff0000
    }
}

注：若没有指定media，默认为all

media query -- 媒体查询

媒体查询是通过不同的媒体类型和条件定义不同的样式表，媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。也是media type的增强。

语法

媒体查询包含一个媒体类型(media type) 以及一个到多个测试媒体特性(media feature)的表达式，表达式和媒体类型将根据实际情况计算得到true或者false。如果指定的媒体类型符合当前设备并且媒体特性表达式都为真，那当前媒体查询为。

@media screen and (min-width: 700px) and (orientation: landscape) {}
/*其中screen就是媒体类型，min-width: 700px是媒体特性表达式*/

逻辑运算符

• and运算符 -- 用于结合多个媒体特性(media feature)到一个media query

  @media screen and (min-width: 700px) and (orientation: landscape) {
      .name {
          color:red;
      }
  }
  

  当设备类型为screen，且viewport的宽度大于700px，并且设备可见区域宽度大于高度（横屏），三个条件都满足时，大括号内的样式才会生效。

• 逗号（,）运算符 -- 用于结合多个media query

  @media (min-width: 700px), screen and (orientation: landscape) {
      .name {
          color:red;
      }
  }
  

  上面代表两种不同设备，一种all，一种screen，用逗号分隔。

• not运算符 -- 用于对整个media query 取反，必须位于一个media query的开头

  @media not all and (monochrome) {}
  

  等价于：

  @media not (all and (monochrome)) {}
  

  注意：not 是对整个media query进行否定，不能对单个media feature否定

• only运算符 --用来定某种特别的媒体类型

  对于支持Media Query的设备来说，如果存在only关键字，Web浏览器会忽略only关键字，并直接根据后面的表达式应用样式文件。对于不支持Media Query的设备，但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。

  @media only screen and (min-width: 400px) and (max-width: 600px) {}
  

  不支持media query但是支持media type的web浏览器，会省略后面的样式文件，上面的实例解释为：

  @media only {}
  

  支持media query 的web浏览器会省略only关键字，上面实例解释为：

  @media screen and (min-width: 400px) and (max-width: 600px) {}
  

media feature -- 媒体特性

下面是一些媒体特性，不是全部

• width -- 定义输出设备中的页面可见区域宽度

• height -- 定义输出设备中的页面可见区域高度

• device-width -- 定义输出设备的屏幕可见宽度

• device-height -- 定义输出设备的屏幕可见高度

• orientation -- 定义'height'是否大于或等于'width'。portrait代表是（竖屏），landscape代表否（横屏）

• aspect-ratio -- 定义width与height的比率，可以设置min/max

• device-aspect-ratio -- 定义device-width与device-height的比率。可以设置min/max。如常见的显示器比率：4/3, 16/9, 16/10

• resolution -- 定义设备的分辨率。可以设置min/max。如：96dpi, 300dpi, 118dpcm

• color -- 定义每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0。可以设置min/max

media query 常用方法

• 排他 （exclusive） 为确保在某一个条件下只有一个样式表生效，将查询条件严格划分，如下面：

  @media (max-width: 400px) {
      html {
          background: red;
      }
  }
  
  @media (min-width: 401px) and (max-width: 800px) {
      html {
          background: green;
      }
  }
  
  @media (min-width: 801px) {
      html {
          background: blue;
      }
  }
  

• 覆盖（overriding） 可以对元素设置相同优先级，使用样式顺序，通过覆盖，避免排他

  @media (min-width: 400px) {
      html {
          background: red;
      }
  }
  
  @media (min-width: 600px) {
      html {
          background: green;
      }
  }
  
  @media (min-width: 800px) {
      html {
          background: blue;
      }
  }
  

• 无线端优先（Mobile first） 默认样式假设为移动设备宽度，然后通过min-width控制扩展样式

  html {
      background: red;
  }
  
  @media (min-width: 600px) {
      html {
          background: green;
      }
  }
  

• PC优先（desktop first） 默认以宽屏进行样式设置，通过max-width控制样式覆盖

  html {
      background: red;
  }
  
  @media (max-width: 600px) {
      html {
          background: green;
      }
  }
  

参考资料：

• http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html

• https://segmentfault.com/a/1190000002812335

• http://blog.csdn.net/ruoyiqing/article/details/39208707

转自：https://segmentfault.com/a/1190000008701062