响应式网页设计.docx

1、响应式网页设计实现响应式网页设计的思路用3个步骤实现响应式网页设计，写在前面的话：随着移动设备的逐渐普及和Web技术的发展，跨端的Web开发需求将会越来越大。如何在多种设备上进行跨端的界面适配呢？我们可以利用CSS3的Media Query来实现。本文主要介绍了移动开发和CSS3结合，来进行多种分辨率适配的例子。文中提到的响应式网页设计（Responsive web design）是一种现代网页设计方法，基于CSS3的媒介查询（Media Query）特性使得网页适应不同设备，即根据设备的分辨率和缩放自动重新布局。 响应式网页设计现在无疑是一件大事情。如果你还不了解响应式设计，可以看看我最近发

2、表的响应式站点列表（译者注：可以好好看看示例中的网站在不同分辨率下的展现方式）。对新手来说，响应式设计可能有一点复杂，但是事实上比你想象的简单。为了帮助你迅速的了解响应式设计，我起草了一篇快速教程。你可以在3个步骤中学习到响应式设计和媒介查询（Media Queries）的基本原理（假定你了解基本的CSS知识）。Header第一步：Meta标签大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里加入这个meta标签。1.IE8或者更早的浏览器并不支

3、持Media Query。你可以使用media-queries.js或者respond.js来为IE添加Media Query支持。1.2.scriptsrc=http:/css3-mediaqueries-3.第二步：HTML结构在这个例子里，我有一个包括头部、内容、侧边栏和页脚的基本页面布局。头部有固定的高度180像素，内容容器是600像素而侧边栏是300像素.第三步：媒介查询-Media QueriesCSS3 Media Query-媒介查询是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。当视图宽度为小于等于980像素时，如下规则将会生效。基本上，我会将所有的容器宽

4、度从像素值设置为百分比以使得容器大小自适应。然后为小于等于700像素的视图指定#content和#sidebar的宽度为自适应并且清除浮动，使得这些容器按全宽度显示。对于小于等于480像素（手机屏幕）的情况，将#header元素的高度设置为自适应，将h1的字体大小修改为24像素并隐藏侧边栏。你可以根据你的喜好添加足够多的媒介查询。我在示例中仅仅展示了3个媒介查询。媒介查询的目的在于为指定的视图宽度指定不同的CSS规则，来实现不同的布局。媒介查询可以写在同一个或者单独的样式表中。 构造基本的HTML页面一个简单的博客页面始终觉得再多口水都没有一个生动鲜明的例子来得实在，下面通过对一个普通HTML

5、页面的改造来体验什么是响应式设计及如何达到。下面构造一个基本的HTML页面，它包含网站导航菜单，正文，图片，侧边栏，表格式的布局以及页脚信息。是个非常完整而中庸的布局，几乎是常见的博客版面。在这个页面中用了html5文档声明，用到了很多html5标签，但是这些标签在ie9以下版本是不支持的，所以我们必须引用一个html5.js文件使得这些标签被其它低版本浏览器确认。低版本浏览器支持CSS3媒体查询第一个JS，作用为低版本浏览器支持HTML5新标签第2个JS，作用为 Responsive Design Example Home Articles Gallery Forum About item1

6、 item2 item3 item4 item5 Sample Title #1 #2 #3 Wayou © 2013| Contact 文章内容填充剩下文章部分需要填充点内容，正好MS Word有这样一个产生随机文章的彩蛋。使用方法是新建一个word文件然后打开输入 =rand(3,10) 再回车。其中rand 函数接收两个参数，第一个表示要产生多少个自然段，第二个表示每段多少行。所以上面回车后我们会得到一篇由3个自然段组成的文章且每段有10行。然后再另存为网页文件：最后可以在浏览器中通过查看源码把包含内容的标签复制到我们的代码中即可。同时这里有一个专门产生填充内容的网站Filler

7、ati。可以定义篇幅，作者信息，标题等。当然以上两种作法多少有点装逼与做作的感觉，你完全可以随便复制点什么东西来作为内容填充的 一_一|。填充内容后HTML变成这样 Sample Title Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the

8、 video that best fits your document. To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want

9、from the different galleries. Themes and styles also help keep your document coordinated. When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme. When you apply styles, your headings change to match the new theme. Save time in Word wi

10、th new buttons that show up where you need them. #1 #2 #3 To change the way a picture fits in your document, click it and a button for layout options appears next to it. When you work on a table, click where you want to add a row or a column, and then click the plus sign. Reading is easier, too, in

11、the new Reading view. You can collapse parts of the document and focus on the text you want. If you need to stop reading before you reach the end, Word remembers where you left off - even on another device. Video provides a powerful way to help you prove your point. When you click Online Video, you

12、can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document. To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For examp

13、le, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries. Themes and styles also help keep your document coordinated. When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to

14、 match your new theme. When you apply styles, your headings change to match the new theme. Save time in Word with new buttons that show up where you need them. To change the way a picture fits in your document, click it and a button for layout options appears next to it. When you work on a table, cl

15、ick where you want to add a row or a column, and then click the plus sign. Reading is easier, too, in the new Reading view. You can collapse parts of the document and focus on the text you want. If you need to stop reading before you reach the end, Word remembers where you left off - even on another

16、 device. 最后出来的效果看起来是这样的：最后为了让侧边栏更有意义一点，给文章正文加上一些子标题同时给侧边栏里的元素加上锚点连接可以在文章的子标题间进行导航。 item1 item2 item3 item4 item5 Sample Title subtitle1 /正文被省略 subtitle2 #1 #2 #3 subtitle3 /正文被省略 subtitle4 subtitle5 /正文被省略 基本的样式最后加上一些样式让整个页面看起来更正常些。我们首先去掉body元素的默认外边距，去掉列表元素前面默认的加点，把菜单里的超连接的下划线也去掉。body margin: 0;li l

17、ist-style: none;/*navigation bar*/nav background-color: #333;nav li display: inline-block; padding-right: 10px;nav li a text-decoration: none; color: white; font-size: 1.5em;nav li a:hover color: #DDD;再修饰下字体及正文中的三个方块div以及其他，最后的样式代码差不多是这样的：html font-family: microsoft yahei,arialbody margin: 0;li list

18、-style: none;/*navigation bar*/nav background-color: #333;nav li display: inline-block; padding-right: 10px;nav li a text-decoration: none; color: white; font-size: 1.5em;nav li a:hover color: #DDD;/*sidebar*/aside width: 15%; float: left;/*post*/.post width: 70%; margin: 0 auto; float: left; /*grid

19、 layout*/.grid .grid .item width: 25%; height: 150px; background-color: #DDD; display: inline-block; /*footer*/footer width: 100%; text-align: center; clear: both;footer li display: inline-block;其中，因为侧边栏和文章向左浮动了，为了让页脚不从最底跳到文章的后面跑到顶部去，要清除页脚footer两边的浮动。footer width: 100%; text-align: center; clear:bot

20、h; 最后页面看起来着不多是这个样子的动态加载样式表接下来的工作是让页面成为响应式的。听起来觉得是一个全新的领域，但其实平时我们已经在实践了。比如当指定元素的尺寸时，使用百分比而不是固定像素的大小时，这样的元素就具备自适应屏幕的能力。最常见的就是指定元素宽度为100%。这样窗口缩放或屏幕不同时元素始终占据屏幕整个宽度。一些不太实用的实践是针对不同屏幕尺寸加载不同的样式表，这其实相当于为不同尺寸写不同的样式表，感觉维护起来不那么方便。代码来自MDN通过在引入样式表时使用media属性可以控制什么尺寸的屏幕使用哪个样式表，于是我们可以实现手机访问时下载手机版样式，电脑访问时下载正常样式。上面代码指

21、定如果设备宽度小于320px则调用 mobile.css样式表。个人觉得这样为一个站点写多个分别的样式表不怎么好，所以这里就不多说了。Viewport响应式设计第一件需要做的事情就是在head标签里指定viewport meta属性。Quick Tip: Dont Forget the Viewport Meta Tag这篇文章很好介绍了Viewport是的缘由及作用。简单说来在手机（iPhone Safari）上访问网页时它默认会对网页进行缩放，尽可能多地在屏幕上展示整个页面的内容。而缩放之后的效果可想而知，一个在电脑上正常展示的页面被缩放进手机屏幕（通常是240*320）里面后，很难阅读。

22、同时由于默认使用缩放，那么你事先设计好的在小屏幕上使用的样式将不起作用，也就是说手机上展示的是电脑版本的一个缩小版。我们看MDN上给出的例子截图。而在代码中指定viewport，则可以让开发者指定网页视图区域及缩放比例等。这样就能修正由浏览器自动缩放带来的影响。通过我们指定如下代码：表示使用设备宽度（即设备的屏幕宽度）并且缩放指定为1也就是不缩放。你可能会问这样指定之后岂不是只能在手机屏幕上显示网站的部分，比如左上角。这时候正是响应式网页设计起作用的时候了。如果你专门为小屏幕的访问进行了优化比如在CSS中使用media属性（后面会讲到），那么当手机访问时会调用相应的样式规则，而不会只显示整个网站的一部分。字体缩放指定固定像素的字体大小是我们设计中经常使用的方式，但如果你想字体大小更具弹性的话，最好还是使用相对大小，CSS中比较常用的指定字体相对大小的单位有百分比，em以及CSS3新增的rem。首先我们指定整个文档的字体大小为100%。表示页面字体大小为浏览器默认大小的100