[CSS] 媒体查询

2016-03-05 本文已影响65人何幻

媒体查询（Media Queries），可以根据不同的媒体情况加载相应的样式。
有两种使用方式：

（1）样式表文件
例如：

<link 
    rel="stylesheet" 
    type="text/css" 
    href="styleA.css" 
    media="screen and (min-width: 400px)"
>

media属性用来进行媒体查询。

其中，screen表示媒体类型，CSS2.1定义了10种媒体类型。
add称为关键字，其他关键字还有not，only等
(min-width:400px)表示媒体特性，要加载该样式表文件，支持的最小设备宽度为400px。

（2）样式

@media screen and (max-width: 600px) { 
  .class {
    background: #ccc;
  }

  ......
}

表示当屏幕尺寸小于600px时，应用包含的样式。