Media Queries媒体查询

Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的页面效果。Media Queries有其自己的使用规则。
一个媒体查询由一个可选的媒体类型和媒体特性表达式，使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。

link元素中的CSS媒体查询

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

样式表中的CSS媒体查询

<style>

@media (max-width: 600px) {

  .facet_sidebar {

    display: none;

  }

}

</style>

逻辑操作符

not、and和only

and操作符用来把多个媒体属性组合成一条媒体查询，对成链式的特征进行请求
not操作符用来对一条媒体查询的结果进行取反。
only操作符仅在媒体查询匹配成功的情况下被用于应用一个样式，
若使用了not或only操作符，必须明确指定一个媒体类型。

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

//媒体查询仅在可视区域宽度不小于700像素并在横屏时有效，可以使用 and 操作符合并媒体属性

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

//逗号分隔列表,在最小宽度为700像素或是横屏的手持设备上应用一组样式

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

//not 关键字应用于整个媒体查询，在媒体查询为假时返回真

最大宽度max-width,最小宽度min-width

“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：

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

 .ads {

   display:none;

  }

}

//“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width:900px){

.wrapper{width: 980px;}

}

定义断点

定义断点，那么断点是什么？简单的描述就是，设备宽度的临界点，也就是前面大家比较关心的Medial Queries中的min-width和max-width值是什么？那么在Responsive设计中，常见的断点有六种，我们今后的Medial Queries条件判断就可以根据这六个断点来定。

巴特西

Media Queries媒体查询

逻辑操作符

最大宽度max-width,最小宽度min-width

定义断点

最新文章

热门文章