2024年，EthanMarcotte提出响应式网页设计(RWD，ResponsiveWebDesign)，其实，这并不是一项新技术，而是已有技术---媒介查询(MediaQueries)、流式布局(FluidGrids)、自适应图片(Scalablelmages)的有机组合。随着技术标准的扩展，这三项技术(媒介查询、流式布局、自适应图片)虽然仍是响应式网页设计的核心，但并不是全部。响应式网页设计无论从观念还是技术都正在经受着优胜劣汰的进化过程。响应式网页设计，是指依据用户的使用设备，使用情境以及使用行为来调整网页的版式、内容、功能和交互方式的设计方法。响应式网页设计为适应多样的扫瞄状况而设计更流畅、更敏捷的页面，达到良好设计实践，为用户供应更优化的体验。

二、响应式网页设计的方法

响应式网页设计是以用户为中心的设计，关注特定情境下的用户体验，它既要适应设备的功能和限制又要适应用户的使用环境。响应式网页设计的方法主要包括以下几个方面。

(一)移动优先(MobileFirst)在网站策划与制作的初步阶段，响应式技术比常规方法费时耗力。一般来讲，开发人员需要了解用户设备及不同使用情境，优先从移动端开头设计，从创建具有肯定可用性的基本体验开头，满意用户简洁、顺畅的情境需求。然后，渐进增加，布局显示内容，提高图片质素，增加必要的服务，供应恰当的交互，制造更丰富的体验。移动优先采纳渐进增加(ProgressiveEnhance-ment)原则，而非早期网站设计提侣的优雅降级(GracefulDegradation)原则。移动优先既可以为不支持媒介查询的移动设备供应适合的布局，聚焦当下最重要的事，也可以降低CSS代码简单性，削减余代码。

(二)媒介查询(MediaQueries)媒介查询是指依据用户特定情境，查询设备各种属性来布局样式和内容。测试的属性包括:设备屏幕宽高(device-width，device-height);视窗显示区域的宽高(width,height)，例如扫瞄器窗口的大小;屏幕方向媒体特性打算一个设备是处于横屏还是竖屏，即设备处于垂直或水平的状态(orienta-tion)，宽长比例等特性(aspect-ratio);设备屏幕辨别率(resolution)，每平方英寸像素数(ppi)，一般的屏幕为163ppi，视网膜(Retina)屏为 326ppi.这些属性可以通过“与或非”等规律运算符形成简单的表达式，以此推断是否为特定目标设备类型，从而加载特别样式、调整页面布局、供应适合的功能和交互。

(三)流式布局(FluidLayouts)传统的固定宽度(FixedWidth)布局以像素为单位，是网页布局中最常见的方法，它简洁粗暴地固定了页面的宽度，使用户在不同设备上扫相同的页面。屏幕较大时，页面两侧消失大片的空白区域未加利用;屏幕较小时，页面内容位置不变，用户只能不断地通过手指滑动进行扫瞄和界面交互。流淌宽度(FluidWidth)布局的单位是百分比。流淌布局依据扫瞄器窗口宽度自动调整页面布局，不会消失水平滚动条。大屏幕时，页面两侧不会消失固定布局中的大面积空白;小屏幕时，内容也不会挤成一团难以阅读。弹性宽度(ElasticWidth)布局以“em"为单位，随着文本大小的转变，容器的宽度也等比例地转变，将容器调整到合适的宽度。由于行宽过短，眼睛往复跳动扫视会破坏阅读节奏;而行宽过长，简单造成持续行进阅读失误。为了提高文本的可读性，尽量使每行的中文字符个数介于25~45之间，英文字符个数介于45~70之间。网格布局(GridLayouts)可以使信息展现得有序、和谐，问距均衡、布局工整的页面提高了可读性，添加或更新内容时也更加简单。