个人技术分享

随着移动设备和不同尺寸屏幕的普及，响应式设计成为前端开发的重要组成部分。响应式设计确保网页在不同设备上都有良好的用户体验。本章将详细介绍媒体查询的基础知识、语法与使用方法，以及如何运用CSS3实现响应式设计。

9.1 媒体查询基础

媒体查询是CSS3引入的一种技术，允许我们根据设备的特性（如宽度、高度、分辨率）来应用不同的样式。通过媒体查询，我们可以创建适应不同屏幕尺寸的响应式网页。

示例

/* 默认样式 */
body {
    font-size: 16px;
}

/* 针对屏幕宽度大于600px的样式 */
@media (min-width: 600px) {
    body {
        font-size: 18px;
    }
}

在这个示例中，默认情况下字体大小为16px，当屏幕宽度大于600px时，字体大小变为18px。

9.2 媒体查询语法与使用

媒体查询的语法包括媒体类型和一个或多个媒体特性，常见的媒体类型有all、screen、print等。媒体特性用于描述具体的条件，如宽度、高度、分辨率等。

基本语法

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
    /* 样式规则 */
}

常见媒体特性

1. width / height：视口的宽度/高度。
2. min-width / max-width：视口的最小/最大宽度。
3. min-height / max-height：视口的最小/最大高度。
4. orientation：设备的方向（portrait或landscape）。
5. resolution：屏幕分辨率（如dpi、dpcm）。

示例

/* 仅针对打印介质 */
@media print {
    body {
        font-size: 12pt;
    }
}

/* 仅针对屏幕且宽度介于600px和1200px之间 */
@media screen and (min-width: 600px) and (max-width: 1200px) {
    body {
        font-size: 18px;
    }
}

/* 仅针对宽度大于1200px的设备 */
@media (min-width: 1200px) {
    body {
        font-size: 20px;
    }
}

9.3 响应式设计的原则与实践

响应式设计的目标是确保网站在不同设备上都有良好的用户体验。以下是一些关键原则：

1. 流式布局：使用百分比或弹性单位（如em、rem、vw、vh）代替固定单位（如px）。
2. 弹性图片：使用max-width: 100%确保图片在容器内自适应。
3. 媒体查询：根据不同设备的特性应用不同的样式。
4. 移动优先：先设计适配小屏幕，再针对大屏幕进行优化。

示例：流式布局与弹性图片

<div class="responsive-container">
    <img src="example.jpg" alt="Example Image">
</div>

.responsive-container {
    width: 100%;
    padding: 10px;
}

img {
    max-width: 100%; /* 图片在容器内自适应 */
    height: auto;
}

9.4 使用CSS3实现响应式设计

结合媒体查询和CSS3的新特性，我们可以实现现代的响应式设计，提升网页的用户体验。

示例：响应式导航栏

<nav class="navbar">
    <ul class="nav-list">
        <li class="nav-item"><a href="#">Home</a></li>
        <li class="nav-item"><a href="#">About</a></li>
        <li class="nav-item"><a href="#">Services</a></li>
        <li class="nav-item"><a href="#">Contact</a></li>
    </ul>
</nav>

/* 默认样式 */
.navbar {
    background-color: #333;
}

.nav-list {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
}

.nav-item {
    text-align: center;
}

.nav-item a {
    display: block;
    padding: 10px;
    color: white;
    text-decoration: none;
}

/* 大屏幕样式 */
@media (min-width: 600px) {
    .nav-list {
        flex-direction: row; /* 水平排列 */
    }

    .nav-item {
        flex: 1; /* 等分 */
    }

    .nav-item a {
        border-right: 1px solid #555;
    }

    .nav-item:last-child a {
        border-right: none;
    }
}

在这个示例中，导航栏在小屏幕上垂直排列，在大屏幕上水平排列。通过媒体查询，我们可以轻松实现这种布局切换。