网页研究:关于响应式页面

作为一个无线部门的人,不懂移动设备是不行的。而作为一个无线的重构,不会写响应式页面更是不行得。而我,一个无线的重构,在我最近做的一个移动端的项目之前,的确是不会写响应式页面的,所以,严格来说,在这个项目之前,我是一个不合格的无线重构人。

而这个项目,却让我快速地掌握了响应式页面重构的一些方法。下面就是通过这个项目来总结我在响应式页面重构学到的东西。

众所周知,所谓响应式页面,就是能够用一套样式,使你的页面能够在不同分辨率的屏幕下都有很好的表现形式。响应式Web设计,这个概念是Ethan Marctte 在A List Apart 发表的一篇文章“Responsive Web Design”中援引响应式建筑而得名:

响应式建筑(responsive architecture),物理空间应该可以根据存在于其中的人的情况进行相应。

根据我所阅读过一些文章及资料,我总结出响应式页面的几个关键组成部分:

1、页面头部的meta说明,可以通过viewport meta标签去让你的html页面的的宽度能根据设备分辨率让浏览器的可视宽度来适应,也可以在这里设置页面的缩放比例等等,这样在成比例的分辨率设备下,就可以更简单地实现响应式。

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

2、流体布局(fluid grid),所谓的流体布局,其实就是在你pc端实现的页面基础上,将一些元素的宽高由原来的固定多少像素(px)调整为百分比(%)或字体比例(em)(或布局方面的margin、padding、left、top等以px为单位的值),这也是当前实现响应式布局的两种主要实现方法。

第一种用百分比(%),就是以该元素的父容器的宽高为100%,其他元素的宽高相对于其父容器的比例,只要将具体的像素值相对于他的父容器的一个百分比折算即可。当然这种方法的换算有点复杂,因为很多相对的宽高折算的百分比系数是带小数的,所以这时候可能要你有足够的耐心才能实现。

在Ethan Marctte的Responsive Web Design这篇文章中给出的一个demo中,我们可以看到他的实际代码里:

@media screen and (max-width: 400px) {

.figure,

li#f-mycroft {

margin-right: 3.317535545023696682%; /* 21px / 633px */

width: 48.341232227488151658%; /* 306px / 633px */ }

第二种方法是用字号比例(em)去实现,其实方法是跟上面一样的,只不过我们将%换成了em,这种方法就是某元素具体的宽高(px)在当前基准字号(font-size)下折算出多少个em。eg: 一个在480分辨率下宽高为64px*64px的元素,其父容器的字号(font-size)为20px,那么它折算成em为单位就是3.2em*3.2em。当其父容器字号基准根据不同的分辨率变化的时候,该元素的宽高也能根据这个字号基准成比例的缩放,就能实现响应式变化。