媒体查询

媒体查询最大的敌人是 安卓集团中众多的奇葩分辨率  简直要人命。

 

分辨率多了以后 会让你的工作复杂度 多了N个维度。

它的基本语法：

@media screen and (max-width:800px){

  

  

}

当最大宽度是800px的时候 {} 里面的代码会生效 

当然@media 可以查询的媒介不止 screen 一种。

这里列出了可查询媒介类型 http://www.w3.org/TR/CSS2/media.html#media-types

 

max-width这样的查询术语 也有很多 

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />  //一个css标签 表明了媒体查询条件。

几个常用的 pc端媒体查询片段 。移动端太多以至于我都没搞懂、。。。。

@media screen and (max-width: 320px) {}    



@media screen and (max-width: 640px) {}    



@media screen and (max-width: 800px) {}    



@media screen and (max-width: 1024px) {}

 看一个简单的实例 http://yueyao.github.io/project/css/mediequery/index.html

更改浏览器宽度可以看到效果。