下载掌阅APP，畅读海量书库
立即打开
响应式网页设计最初是由美国人伊桑·马科特（Ethan Marcotte）提出的，响应式网页可自动根据不同设备进行自动响应、自动调整页面布局。
响应式网页设计（Responsive Web Design，RWD）是指设计一套应用程序用户界面（User Interface，UI），界面可自动响应不同设备窗口或屏幕尺寸，并且在内容和布局的渲染方面表现良好。
计算机端与移动端的屏幕尺寸存在差异，不同厂家同类产品的屏幕尺寸也不尽相同。为计算机端设计的页面运行在移动端时会出现错位变形的现象，影响页面浏览效果。为了优化用户体验，越来越多的开发人员选择通过响应式网页设计来实现一个页面兼容多个终端的目标。
值得注意的是，响应式布局与自适应布局均可实现一个页面兼容多个终端，读者很容易将二者混淆。响应式布局与自适应布局完全不同，响应式布局根据其设计的页面需要检测设备的视口分辨率，针对不同设备在客户端处理代码，进而展现不同的布局和内容；自适应布局需要开发多套页面，根据不同的视口分辨率判断当前处于计算机端还是移动端，从而向服务器发起请求，返回不同的页面。
读者要关注响应式网页设计，熟悉响应式网页的特点。下面以国家智慧教育公共服务平台的官网为例。通过计算机端访问该网站主页时，显示效果如图1.1所示。
图1.1 通过计算机端访问该网站主页
通过移动端访问该网站主页时，显示效果如图1.2所示。
图1.2 通过移动端访问该网站主页
响应式网页设计的步骤如下。
1. 设置<meta>标签
在<head>标签里加入<meta>标签，该标签涵盖页面描述信息、关键词等。可用<meta>标签提示浏览器使用当前设备的屏幕宽度作为视图宽度并禁止初始缩放，从而帮助浏览器精准显示页面内容。
2. 使用媒体查询设置样式
媒体查询是响应式网页设计的核心，通过它能够与浏览器进行“沟通”。根据媒体类型和条件样式规则匹配的数值，可设置设备的手持方向为垂直方向或水平方向，以及设置页面的CSS样式等。
3. 字体设置
响应式网页中字体的大小应与其父容器关联，这样才能适应屏幕尺寸变化。CSS3的新单位rem是相对于根元素字体大小的单位。根据设备类型重置根元素字体大小，可使页面文字实现屏幕适配。
4. 第三方框架
可利用较为流行的Bootstrap和Vue框架实现响应式网页的高效开发。
1. 响应式网页的优点
响应式网页建立在HTML和CSS3的基础之上，因此浏览器只有支持HTML5和CSS3才可设计出响应式网页。下面对响应式网页的优点进行说明。
（1）开发成本低
以移动端为例，读者可利用媒体查询技术实现页面与不同移动设备的适配。
（2）数据同步更新
不同终端的响应式网页共用一个数据库，当数据库更新后，各个终端可同步更新自身的页面数据。
（3）兼容当前及未来设备
信息技术的发展日新月异，移动设备不断推陈出新，响应式网页可兼容不断推出的新设备。
（4）维护成本低
HTML结构可应用于多种平台，不存在特殊的关联匹配关系。使用响应式网页设计为不同终端的页面进行特色规划时，不需要重新开发HTML页面，只需使用CSS样式针对设备类型进行调整即可。因此，响应式网页的维护成本较低，适用范围广。
2. 响应式网页的缺点
在网页开发中，响应式网页具有鲜明的优点，但由于特殊的设计需求、技术的限制等因素，响应式网页仍有缺点。下面对响应式网页的缺点进行说明。
（1）旧版浏览器不支持
由于响应式网页需与CSS3新增的Media Query配合使用，因此旧版浏览器并不支持响应式网页。
（2）加载速度慢
响应式网页在加载页面时需同时加载多个CSS资源为适配多种设备做准备，再根据读取的设备屏幕尺寸去匹配对应CSS资源。下载大量的CSS资源会降低网页的加载速度。
（3）设计局限性
响应式网页并不适合大型企业的复杂网站，复杂网站的页面内容较多，而响应式网页最忌讳布局复杂、内容烦琐，设计此类页面需要大量代码，代码过多会影响页面加载速度。
（4）开发时间较长
响应式网页需要兼容多种设备，因此对应的CSS资源必定是逻辑复杂的，开发响应式网页所花费的时间必定会比开发普通网页的时间长。
（5）用户流量浪费
响应式网页统一加载页面中的图片和视频，当用户在配置较低的移动端上加载不符合当前设备要求的图片或者视频时，会过度消耗用户的流量。