CSS基础知识之media query

响应式设计(Responsive Design)是一种让网页针对不同设备和浏览器响应不同的效果的方法。而媒体查询是响应式设计中最常用的方法之一。

语法

媒体查询包含一个媒体类型和至少一个的表达式(宽度、高度、颜色等等)的媒体属性。如果媒体查询中的媒体属性和文档展示的设备相符，则查询结果为 true ，并且媒体查询中的所有表达式为 true 。

@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}

逻辑操作符

and

and操作符用来把多个媒体属性组合起来，每个属性为true的时候返回查询结果为真。

@media (min-width: 700px) and (orientation: landscape) { ... }

not

not操作符用来对一条媒体查询的结果进行取反。

@media not all and (monochrome) { ... }

逗号分隔符

逗号分隔符相当于逻辑运算里的or

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

前半部分我用的是一个宽700px以上的屏幕设备，媒体语句为真。,之后的部分,表示我用的是一个手持设备的横屏模式，宽不管够不够700px都返回真。

only

only操作符表示在媒体查询匹配成功的情况下应用样式

媒体属性

Mozilla media queries 文档里有详细的属性说明和用法。
这里不再列出，需要的可以自行查阅。

viewport

The Viewport文档介绍了说明Viewport的使用要点。可以和媒体查询结合使用，让你的响应式布局在移动浏览器上现实的更好。