什么是媒体查询

CSS的Media Query媒体查询（也称为媒介查询）用来根据窗口宽度、屏幕比例和设备方向等差异来改变页面的显示方式。使用媒体查询能够在不改变页面内容的情况下，为特定的输出设备制定显示效果。

媒体查询由媒体类型和条件表达式组成。常用的媒体查询属性如下。

• 设备宽高： device-width、device-height。
• 渲染窗口的宽和高：width、height。
• 设备的手持方向：orientation。
• 设备的分辨率：resolution。

媒体查询的使用方法有两种，即内联式和外联式。下面通过代码来对这两种方式进行演示。利用媒体查询实现当文档宽度大于640px 时，则对CSS样式进行修改。

（1）内联式是直接在CSS中使用，示例代码如下。

<style>
 @media screen and (min-width:640px){
  css属性: css属性
 }
</style>

（2）外联式是作为单独的CSS文件从外部引入的，示例代码如下。

<link href="style.css" media="screen and (min-width:640px)" ref="stylesheet">

读者在学习媒体查询时，除了理解媒体查询的基本概念以及语法格式外，还需要通过案例来练习媒体查询的基本使用。具体会在后面的小节中进行详细讲解。