在 QA TechWeek 2014 期间，QA 公司首席技术专家 David Walker 在使用 Foundation 进行响应式设计的会议上，提出了响应式网站设计的原则。Walker 提到从现有桌面网站创建移动应用网站的多种方式：原生应用，为每种移动操作系统开发一个应用；嵌入式 HTML 5，使用 PhoneGap 或者类似的工具；在服务端过滤，分别为桌面和移动设备建立网站，在两者间进行重定向。
分析完每种方法的优缺点后，Walker 提出了响应式设计（RWD），使用 HTML 5、JavaScript 和 CSS 创建响应式网站，根据设备即时调整布局、格式和内容。RWD 的主要好处是避免内容剃重复，使网站能够适应所有设备，包括未来设备的尺寸。缺点是需要优秀的 CSS 和 JavaScript 技能，有些资源在移动网络中太大，针对旧版本的浏览器需要 Polyfill。
要做到响应式设计，Walker 建议遵循以下原则：
- 建立流动布局（Fluid layout）。所有容器的宽度必须定义成浏览器 Viewport 的百分比。
- 使用 CSS3 Media Query 。针对不同的媒体类型如屏幕、打印机、电视等等，以及不同的媒体参数，如宽度、高度、颜色、分辨率等等，使用不同的样式。
- 使用自适应图片（Fluid image）。图片尺寸可以自适应，不超过最大显示宽度。
要决定样式适用于哪种媒体类型，你需要确定有哪些不同的显示宽度。例如， www.time.com 使用了 Media Query 相关的 40 多种样式。可以通过 Chrome 扩展 Responsive Inspector 查看。通过这些样式，time.com 的内容将在浏览器层面自动布局，因此即使在不同宽度的设备上显示，页面也不需要水平滚动。
Walker 表示，响应式网站设计还需要考虑：
- 为不同的设备和网络速度优化图片；
- 为移动 UI/UX 改变导航模式；
- 改变链接和按钮的样式，使其适于触摸；
- 动态调整字体大小，以适应不同的屏幕分辨率；
- 按需加载内容，而不是隐藏起来；
- 提供图形的 Retina 版本。
Walker 还演示了如何使用 Foundation 创建响应式网站，Foundation 是一个开源的响应式前端框架。另一个类似的解决方案是 Bootstrap ，它最初由 Twitter 开发。
中国开发者画像洞察研究报告 2024
分析开发者的行为模式、工作价值、职业发展等内容，帮助整个行业生态更深入地理解开发者，为他们提供更精准...
评论