媒体查询做页面的响应式布局@media

**媒体查询与响应式布局**

随着移动设备的普及，网页设计师们开始关注如何让网站在不同屏幕尺寸下呈现出最佳效果。媒体查询（Media Queries）是CSS3中的一项功能，它允许我们根据不同的屏幕尺寸、分辨率和设备类型来调整页面的布局。

**什么是媒体查询**

媒体查询是一种条件语句，用于在特定条件下应用CSS样式。它使用@media关键字开头，后面跟着一个或多个条件，例如屏幕宽度、分辨率、设备类型等。如果这些条件成立，则会应用指定的CSS样式。

**媒体查询的基本结构**

媒体查询的基本结构如下：

css@media (条件) {
 /* CSS样式 */
}

其中，条件可以是以下几种：

* `max-width`：最大宽度* `min-width`：最小宽度* `max-height`：最大高度* `min-height`：最小高度* `(orientation: portrait)` 或 `(orientation: landscape)`:设备方向（垂直或水平）
* `(device-width: xxxdppx)` 或 `(device-width: xxxpx)`：设备宽度**媒体查询的应用**

下面是一些媒体查询的例子：

###1. 根据屏幕宽度调整布局

css@media (max-width:768px) {
 /* 小于或等于768px 时的样式 */
}

@media (min-width:769px) and (max-width:1024px) {
 /* 大于768px且小于或等于1024px 时的样式 */
}

###2. 根据设备方向调整布局

css@media (orientation: portrait) {
 /* 设备方向为垂直时的样式 */
}

@media (orientation: landscape) {
 /* 设备方向为水平时的样式 */
}

###3. 根据屏幕分辨率调整布局

css@media (max-resolution:1dppx) {
 /* 最大分辨率为1dppx 时的样式 */
}

@media (min-resolution:2dppx) and (max-resolution:4dppx) {
 /* 最小分辨率为2dppx且最大分辨率为4dppx 时的样式 */
}

###4. 根据设备类型调整布局

css@media (device-width:320px) and (max-device-width:480px) {
 /* 设备宽度为320px 至480px 时的样式 */
}

@media (min-device-width:481px) and (max-device-width:640px) {
 /* 设备宽度为481px 至640px 时的样式 */
}

**媒体查询与响应式布局**

媒体查询是实现响应式布局的关键技术之一。通过使用媒体查询，我们可以根据不同的屏幕尺寸、分辨率和设备类型来调整页面的布局，从而提供最佳的用户体验。

下面是一个简单的例子：

css/* 基础样式 */
body {
 font-size:16px;
}

/* 小于或等于768px 时的样式 */
@media (max-width:768px) {
 body {
 font-size:14px;
 }
}

/* 大于768px且小于或等于1024px 时的样式 */
@media (min-width:769px) and (max-width:1024px) {
 body {
 font-size:16px;
 }
}

在这个例子中，我们定义了一个基础样式，然后根据不同的屏幕尺寸来调整字体大小。

**总结**

媒体查询是CSS3中的一项功能，它允许我们根据不同的屏幕尺寸、分辨率和设备类型来调整页面的布局。通过使用媒体查询，我们可以实现响应式布局，从而提供最佳的用户体验。