用 3 个步骤实现响应式网页设计 分类： 移动开发 前端 应用开发 2011-12-18 23:29 2642 人阅读 评论(2) 收藏 举报 写在前面的话：随着移动设备的逐渐普及和 Web 技术的发展，跨端的 Web 开发需求将会越来越大。如何在多种设备上进行跨端的界面适配呢？我们可以利用 CSS3 的 Media Query 来实现。本文主要介绍了移动开发和 CSS3 结合，来进行多种分辨率适配的例子。文中提到的响应式网页设计（Responsive web design）是一种现代网页设计方法，基于 CSS3 的媒介查询（Media Query）特性使得网页适应不同设备，即根据设备的分辨率和缩放自动重新布局。-译自：http:/webdesignerwall.com/tutorials/responsive-design-in-3-steps转载请注明：来自蒋宇捷的博客（http:/blog.csdn.net/hfahe ）响应式网页设计现在无疑是一件大事情。如果你还不了解响应式设计，可以看看我最近发表的响应式站点列表（译者注：可以好好看看示例中的网站在不同分辨率下的展现方式）。对新手来说，响应式设计可能有一点复杂，但是事实上比你想象的简单。为了帮助你迅速的了解响应式设计，我起草了一篇快速教程。你可以在 3 个步骤中学习到响应式设计和媒介查询（Media Queries）的基本原理（假定你了解基本的 CSS 知识）。第一步：Meta 标签（查看演示）大多数移动浏览器将 HTML 页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的 meta 标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在 标签里加入这个 meta 标签。view plaincopy to clipboardprint?1. IE8 或者更早的浏览器并不支持 Media Query。你可以使用 media-queries.js 或者 respond.js 来为 IE 添加 Media Query 支持。view plaincopy to clipboardprint?1. 2. 3. 第二步： HTML 结构在这个例子里，我有一个包括头部、内容、侧边栏和页脚的基本页面布局。头部有固定的高度 180 像素，内容容器是 600 像素而侧边栏是 300 像素。 第三步：媒介查询-Media QueriesCSS3 Media Query-媒介查询是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。当视图宽度为小于等于 980 像素时，如下规则将会生效。基本上，我会将所有的容器宽度从像素值设置为百分比以使得容器大小自适应。 然后为小于等于 700 像素的视图指定 #content 和#sidebar 的宽度为自适应并且清除浮动，使得这些容器按全宽度显示。对于小于等于 480 像素（手机屏幕）的情况，将 #header 元素的高度设置为自适应，将 h1 的字体大小修改为 24 像素并隐藏侧边栏。你可以根据你的喜好添加足够多的媒介查询。我在示例中仅仅展示了 3 个媒介查询。媒介查询的目的在于为指定的视图宽度指定不同的 CSS 规则，来实现不同的布局。媒介查询可以写在同一个或者单独的样式表中。结论这个教程想要为你展示响应式设计的基本原理。如果你想要更多进阶的教程，请看看我之前的教程：使用媒介查询进行响应式设计。