媒体查询最大的敌人是 安卓集团中众多的奇葩分辨率 简直要人命。
分辨率多了以后 会让你的工作复杂度 多了N个维度。
它的基本语法:
@media screen and (max-800px){
}
当最大宽度是800px的时候 {} 里面的代码会生效
当然@media 可以查询的媒介不止 screen 一种。
这里列出了可查询媒介类型 http://www.w3.org/TR/CSS2/media.html#media-types
max-width这样的查询术语 也有很多
<link rel="stylesheet" media="screen and (max- 600px)" href="small.css" /> //一个css标签 表明了媒体查询条件。
几个常用的 pc端媒体查询片段 。移动端太多以至于我都没搞懂、。。。。
@media screen and (max- 320px) {} @media screen and (max- 640px) {} @media screen and (max- 800px) {} @media screen and (max- 1024px) {}
看一个简单的实例 http://yueyao.github.io/project/css/mediequery/index.html
更改浏览器宽度可以看到效果。