15、响应式设计与移动模板的实现技巧

响应式设计与移动模板的实现技巧

1. 响应式设计的力量

Web 是一个动态的媒介，内容可以在各种设备上以多种方式呈现。响应式设计的目标是让开发者构建的应用和网站能让任何设备都能轻松访问。它基于各种条件提供响应，包括用户角色、用户试图完成的任务以及用户用于完成任务的工具。

1.1 问题的提出

传统的弹性布局在特定类型的浏览器（如仅桌面浏览器）中效果较好，但当用户使用移动设备访问网站或应用时，由于浮动元素（如右侧列）无法无限缩小，页面会变得混乱。例如，在 iPhone 上打开应用，体验会非常糟糕，就像用 6 号律师字体阅读一样。

1.2 解决方案：媒体查询（@media queries）

我们可以使用弹性布局和 CSS3 中的 @media 查询来解决这个问题。这些技术可以让我们构建适用于各种形状和大小的未来设备的应用，而无需为组织中使用的每种设备类型编写自定义页面。

1.2.1 关键步骤

在构建解决方案时，我们关注两个关键步骤：
- 当用户窗口宽度小于 800 像素时，适用于 iPad 和大多数平板电脑或上网本等设备。
- 当窗口宽度小于 640 像素时，适用于大多数手机，包括配备 Retina 显示屏的 iPhone。

1.2.2 具体操作

1. 添加媒体查询文件 ：添加一个新文件 media.css.scss 来存放媒体查询规则。同时，编辑 application.css 以确保在其他规则渲染后应用这些查询：