关于自适应式页面制作方式

所谓自适应式页面，就是能够用一套样式，使你的页面能够在不同分辨率的屏幕下都有很好的体现情势。自适应式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%，其他元素的宽高相对于其父容器的比例，只要将详细的像素值相对于他的父容器的一个百分比折算即可。当然这种方式的换算有点复杂，由于许多相对的宽高折算的百分比系数是带小数的，所以这时候可能要你有充足的耐心才能实现。