响应式 Web 设计 - Web 开发 编辑

随着越来越多的用户使用移动设备来浏览网站和应用，Web设计人员和开发人员需要确保他们的作品在移动设备上同样能正常运作，并且看上去和在传统台式电脑上一样好。 著名设计师 Luke Wroblewski 主张 "移动优先" 设计而不是为桌面端设计完之后再考虑移动端。 无论您将移动设备作为主要目标来设计或作为额外目标，您都可以借助强大的CSS来保证同样的内容从手机到宽屏高分辨率显示器上，实现跨全部硬件平台访问和适应。

这种方法被称为“响应式 Web 设计”。它的一些策略包括：:

• 流式布局： 按照浏览器视窗的百分比来设定所有容器的宽度，从而使容器在浏览器窗口大小变化时自动缩放。
• 媒体查询： 基于显示设备的物理特性（例如：尺寸、分辨率、宽高比、颜色位深等）来调用不同的样式表。
• 流式图片： 设置图像所占宽度至多为设备的最大宽度。

Firefox Marketplace 的最低需求

如果您提交一个应用到 Firefox OS 或 Firefox for Android 上的Firefox Marketplace，那么这个应用必须响应不同的手机屏幕尺寸和屏幕像素密度。请记住屏幕最小尺寸为 320 * 480 像素。另一个常见的错误是未识别屏幕像素密度，以至于没有相应地调整字体大小和触摸目标。欲了解更多信息， 请参阅 Marketplace 审查准则。

相关资源

概述

• 响应式 Web 设计, by Ethan Marcotte
• 响应式 Web 设计：初学者入门教程, by Rick Petit
• 响应式 Web 设计介绍与应用, by Kayla Knight
• 多设备 Web 设计：一种进化, by Luke Wroblewski
• 响应式设计工作流 by Stephen Hay (book)
• 响应式 Web 设计 - 介绍 

技术文档

• CSS 媒体查询 参考文档
• 指针媒体查询, by David Walsh
• 使用 CSS 媒体查询响应不同可用空间, by Chris Coyier
• 简单流式布局, by Russ Weakley
• 流式图像, by Ethan Marcotte
• 为触摸屏而设计, by Chris Kemm
• 响应式 Web 设计技术、工具以及设计方案, by Smashing Editorial Team

工具

• Responsive Design View in Firefox

样例

• DevDerby demos of CSS 媒体查询
• 20个使用媒体查询完成的响应式 Web 设计的震撼样例, by Joshua Johnson
• 响应式设计：50个样例和最佳实践