媒体查询最大的敌人是 安卓集团中众多的奇葩分辨率 简直要人命。
分辨率多了以后 会让你的工作复杂度 多了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
更改浏览器宽度可以看到效果。
