响应式网页设计

✍ dations ◷ 2025-07-13 17:22:24 #层叠样式表,网页设计,响应式网页设计,人机互动,可用性,用户界面,2010年代创造的新词语

响应式网页设计(英语:Responsive web design,通常缩写为RWD),或称自适应网页设计、回应式网页设计、对应式网页设计。是一种网页设计的技术做法,该设计可使网站在不同的设备(从桌面电脑显示器到移动电话或其他移动产品设备)上浏览时对应不同分辨率皆有适合的呈现,减少用户进行缩放、平移和滚动等操作行为。

对于网站设计师和前端工程师来说,有别于过去需要针对各种设备进行不同的设计,使用此种设计方式将更易于维护网页。

此概念于2010年5月由国外著名网页设计师Ethan Marcotte所提出。

采用 RWD 设计的网站使用CSS3 Media queries(英语:Media queries),即一种对 @media 规则的扩展,以及流式的基于比例的网格和自适应大小的图像以适应不同大小的设备:

响应式网页设计变得更加重要,因为移动流量现在占互联网流量的一半以上。因此,谷歌宣布移动设备时代的到来(Mobilegeddon)(2015年4月21日),并开始提高移动友好的网站的评级,如果搜索是被从一个移动设备发起。

“移动优先”和“Unobtrusive JavaScript”/“渐进增强”(考虑一种新的网站设计时的策略)是先于 RWD 的相关概念: 基础的手机浏览器不理解 JavaScript 或者 media queries,因此建议的做法是创建一个只有基本框架的网站,然后再为智能手机和 PC 提供增强功能;而不是试着“优雅降级”——让一个复杂的,图像丰富的站点工作在最基本的移动电话上。

在一个网站必须支持缺乏 JavaScript 的基本的移动设备的情况下,浏览器 (用户代理) 探测 (也叫做“浏览器嗅探(英语:Browser-sniffing)”),和移动设备探测(英语:Mobile device detection)是推断某些 HTML 和 CSS 特性是否受支持的两种方式 (作为渐进增强的基础)—然而,这些方法不完全可靠。

对于能力更强的移动电话和 PC,可以直接测试浏览器对 HTML/CSS 功能的支持 (识别设备或者用户代理字符串) 的 JavaScript 框架如 Modernizr, jQuery 和 jQuery Mobile(英语:JQuery Mobile)等流行起来。Polyfills(英语:Polyfill)可以被用于添加对一些功能的支持—比如,支持 media queries (RWD 所需要的),和在 (旧版本) Internet Explorer 上提高 HTML 5 支持。功能探测在较旧的浏览器上也可能不完全可靠: 某些也许会报告一个特性可用,然而它或者是缺失,或者是实现的如此拙劣以至实质上无法工作。

RWD网页设计需注意的基本原则

Luke Wroblewski 总结出了 RWD 和移动设计中的一些挑战,还创建了一个多设备布局模式的目录。他提议,比起单纯的 RWD 手段,Device Experience 或者 RESS (通过服务器端组件的响应式网页设计, Responsive Web Design with Server Side Components) 等方法可以提供对移动设备更加优化的用户体验。样式表语言如Sass的服务器端“动态 CSS(英语:Dynamic Cascading Style Sheets)”实现可以是这种做法的一部分。

RWD 的一个问题是横幅广告和视频不是流式的。然而搜索广告(英语:Search advertising)和 (横幅) 显示广告支持特定的设备平台目标,和为桌面,智能手机和基本的移动设备提供不同的广告尺寸格式。可以为不同平台使用不同的着陆页(英语:Landing page)URL,或者可以用 AJAX 显示一个页面上的不同广告变体。

Ethan Marcotte 在他在 A List Apart(英语:A List Apart) 的文章中发明了术语 Responsive Web Design (RWD)。他在他 2011 年关于这个主题所写的简短的书中描述了响应式网页设计的理论和实践。响应式设计被 .net 杂志(英语:.net (magazine)) 列为 2012 年顶级网页设计趋势的第二名 (渐进增强是第一名)。他们也列出了 Ethan Marcotte 最喜欢的响应式站点之中的 20 个。

Atop Technologies

相关

  • 烟曲霉烟曲霉(学名:Aspergillus fumigatus)是属于散囊菌目发菌科曲霉属的一种真菌,可生长在土壤、空气、谷物、污染的食品、霉腐物等基物上。该种分布于中国、澳大利亚、比利时、加拿
  • BBC Four英国广播公司第四台(英语:BBC Four),是英国广播公司主要面向英国国内播出的电视频道,2013年12月10日开始高标清同步播出。BBC第四台于格林威治时间2002年3月2日晚间19点开播,距离
  • 网络时间协议网络时间协议(英语:Network Time Protocol,缩写:NTP)是在数据网络潜伏时间可变的计算机系统之间通过分组交换进行时钟同步的一个网络协议,位于OSI模型的应用层。自1985年以来,NTP是
  • 朱丽娅·加德纳·泰勒朱莉娅·泰勒(英语:Julia Tyler,闺名:加德纳;1820年5月4日-1889年7月10日)是第十任美国总统约翰·泰勒的第二任妻子,1845年3月4日至1844年6月26日为第一夫人。朱莉娅·加德纳·泰勒
  • 过度捕鱼过度捕鱼,又称过度捕捞、过渔,指捕鱼产业将鱼类资源降低到可接受的程度以下。其可以发生在大小在鱼塘到大洋之间的任何水域。过度捕鱼最终可能导致资源耗损,从而造成渔业补贴加
  • 日本捕鲸业日本捕鲸始于绳文时代(前131世纪-前4世纪)。在国际捕鲸委员会禁止商业捕鲸后,20世纪日本庞大的商业捕鲸活动宣告结束。1986年,国际捕鲸委员会允许日本以“科学研究”的目的,在南极
  • Lon蛋白酶家族结构 / ECOD结构 / ECOD在分子生物学中,Lon蛋白酶家族是一个依赖ATP的丝氨酸蛋白酶家族,在细菌、古菌以及真核生物中都有发现。在真核生物中,大部分的Lon蛋白酶都定位于线粒体
  • 辣汤辣汤,是流行于山东南部枣庄、临沂,江苏徐州等地的一种早点,它与流行于河南、陕西等地的胡辣汤完全不同。 辣汤的做法是:将面粉掺水和成面团,然后不断加水用手揉洗,洗到只剩面筋为
  • 加的夫 (阿拉巴马州)加的夫(英语:Cardiff),是美国阿拉巴马州下属的一座城市。面积约为0.25平方英里(约合 0.65平方公里)。根据2010年美国人口普查,该市有人口55人,人口密度为219.12/平方英里(约合84.62/
  • #现实高中《#现实高中》(英语:)是一部2017年美国校园喜剧片,由费南多·雷布里哈执导。电影主演包括内斯塔·玛丽·库珀、凯特·华许、约翰·迈克尔·希金斯。定于2017年9月8日在Netflix上