[CSS] 媒体查询

媒体查询(Media Queries),可以根据不同的媒体情况加载相应的样式。
有两种使用方式:

(1)样式表文件
例如:


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

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

(2)样式

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

  ......
}

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

你可能感兴趣的:([CSS] 媒体查询)