媒体查询笔记

媒体查询笔记

媒体查询目的是向不同设备提供不同样式的。

• 使用 @media 查询可以针对不同的媒体类型定义不同的样式。
• @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果需要设置设计响应式的页面。
• 重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

语法：

@media mediatype and|not|only (media feature) {
    /*CSS-Code;*/
}

Media Query 是 CSS3 对 Media Type 的增强版，其实可以将 Media Query 看成 Media Type(判断条件) + CSS(符合条件的样式规则)

媒介类型(Media Type)：

• screen：用于电脑屏幕，平板电脑，智能手机等
• print：用于打印机和打印预览
• speech：应用于屏幕阅读器等发声设备
• all：用于所有媒体设备类型

媒介特征（Media features)：

• device-height：定义输出设备的屏幕可见高度。
• device-width：定义输出设备的屏幕可见宽度。
• height：定义输出设备中的页面可见区域高度。
• width：定义输出设备中的页面可见区域宽度。
• max-device-height：定义输出设备的屏幕可见的最大高度。
• max-device-width：定义输出设备的屏幕可见的最大宽度。
• max-height：定义输出设备中的页面可见的最大高度。
• max-width：定义输出设备中的页面可见的最大宽度。
• min-device-height：定义输出设备的屏幕可见的最小高度。
• min-device-width：定义输出设备的屏幕可见的最小宽度。
• min-height：定义输出设备中的页面可见的最小高度。
• min-width：定义输出设备中的页面可见的最小宽度。

逻辑操作符

• 合并多个媒体属性

  @media screen and (min-width: 600px) and (max-width:100px)

合并多个媒体属性或合并媒体属性与媒体类型, 一个基本的媒体查询，即一个媒体属性与默认指定的screen媒体类型。

• 指定备用功能

  @media screen and (min-width: 769px), print and (min-width: 6in)"

没有or关键词可用于指定备用的媒体功能。相反，可以将备用功能以逗号分割列表的形式列出这会将样式应用到宽度超过769像素的屏幕或使用至少6英寸宽的纸张的打印设备。

• 指定否定条件

  @media not screen and (monochrome)

要指定否定条件，可以在媒体声明中添加关键字not，不能在单个条件前使用not。该关键字必须位于声明的开头，而且它会否定整个声明。所以，上面的示例会应用于除单色屏幕外的所有设备。

4、向早期浏览器隐藏媒体查询

media="only screen and (min-width: 401px) and (max-width: 600px)"

portrait：代表竖屏； landscape：代表横屏。在iPhone和iPad上没多大区别

使用媒体查询

1. 在 link 标签中使用， 选择引入的 css 文件

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

1. 在 style 标签中使用， 选择引入的 css 文件，利用引入 @import

<style type="text/css" media="screen and (min-width:600px) and (max-width:900px)">  
    @import url("css/style.css");  
</style>  

1. 直接在 css 中使用, 利用 @media

@media screen and (max-width: 800px) {    
    /*CSS样式 */  
}  

注意:

device-width/height width/height来做为的判定值。 device-width/height 是设备的宽度（如电脑手机的宽度，不是浏览器的宽度）, width/height使用documentElement.clientWidth/Height即viewport的值。

资料：
菜鸟教程 八、媒体查询（响应式布局）
常用主流移动设备CSS3 Media Queries整理
CSS3 @media 查询