HTML 响应式设计

响应式网页设计（Responsive Web Design）使网页能够在不同尺寸的设备上都能良好显示，包括桌面电脑、平板和手机。

Viewport 设置

Viewport是浏览器的可视区域。移动设备上的viewport比实际屏幕小，需要特殊设置。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

属性说明

width=device-width：宽度等于设备宽度
initial-scale=1.0：初始缩放比例为1

CSS 媒体查询

媒体查询允许根据设备特性应用不同的CSS样式。

基本语法

@media screen and (max-width: 768px) {
    body {
        background-color: lightblue;
    }
}

常见断点

设备	宽度范围
手机	< 768px
平板	768px - 1024px
桌面	> 1024px

响应式图片

使用 max-width: 100% 让图片自动适应容器：

img {
    max-width: 100%;
    height: auto;
}

使用 <picture> 元素提供不同尺寸的图片：

<picture>
    <source media="(min-width: 1024px)" srcset="large.jpg">
    <source media="(min-width: 768px)" srcset="medium.jpg">
    <img src="small.jpg" alt="图片">
</picture>

弹性盒子与网格

使用CSS Flexbox和Grid创建响应式布局：

/* Flexbox响应式布局 */
.container {
    display: flex;
    flex-wrap: wrap;
}

.item {
    flex: 1 1 300px;
}

/* Grid响应式布局 */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

交互式示例

在下面的代码编辑器中，尝试修改媒体查询的断点：

💻 在线代码编辑器

👁️ 预览效果

最佳实践

建议

始终添加viewport meta标签，这是响应式设计的基础
使用移动优先（Mobile First）的设计方法
使用相对单位（%、rem、em）而非固定像素
图片设置 max-width: 100% 防止溢出
使用CSS Grid和Flexbox简化响应式布局
在不同设备上测试你的设计