3.3 响应式网页设计

3.3.1 响应式网页设计基础

响应式网页设计是一种现代的网络页面设计布局方法，核心理念是根据用户行为以及使用的设备环境（如系统平台、屏幕尺寸、屏幕定向等）进行智能响应和调整。

（1）什么是响应式网页设计

响应式网页设计是一种能够自动适应不同设备和屏幕尺寸的网页设计方法，通过使用灵活的布局方法、可伸缩的图像和媒体查询等技术，使网页能够在不同的设备上提供良好的用户体验。响应式设计的目标是使网页在各种设备上都能够呈现出良好的可读性，无论是在桌面电脑、平板电脑还是手机等移动设备上都能够自动调整布局和内容，也就是一个网站兼容多个终端，而不是为每个终端做一个特定的版本。

（2）响应式网页设计的核心技术

• 流式布局，使用百分比或em等相对单位定义页面元素的宽度和高度，使得页面布局能够随着屏幕尺寸的变化而自动调整。

• 弹性图片，使用CSS的“max-width”属性或其他技术，使图片能够自动调整大小以适应不同的屏幕尺寸，同时保持图片的清晰度。

• 媒体查询，CSS引入的媒体查询功能允许开发者根据不同的屏幕尺寸、分辨率或其他媒体特性来应用不同的样式规则。

（3）响应式网页设计的核心优势

• 多终端适应性，响应式网站能够适应各种屏幕尺寸和设备，包括桌面电脑、平板电脑和手机等移动设备，提供一致的浏览体验。

• 搜索引擎优化，响应式网站只有一个URL，有助于搜索引擎更好地索引和排名网站内容。

3.3.2 案例：实现响应式网页

本案例采用流式布局和媒体查询相结合的方法创建一个响应式网页，当屏幕尺寸发生变化时，在一定尺寸内基于流式布局进行变化，在达到媒体查询的断点时，改变网页的排版样式，示例代码如下。

HTML部分

CSS部分

JS部分

页面效果展示如下。

① 浏览器视口为“1920px”时，如图3-3-2-1所示。

② 浏览器视口大于“768px”且小于“1200px”时，如图3-3-2-2所示。

③ 浏览器视口小于“768px”，如图3-3-2-3所示。

创作说明

名称：编程指南-CSS案例开发从学到用完美实践

版本：2024年

网站：http://www.51xueweb.cn

撰写团队：杜宇飞 侯志强 尤飞祥 段玉昆

指导审核：阮晓龙