CSS自适应网页制作教程
作者：秋了秋 发表时间：2014年09月23日
自适应网页即是响应式网页，所谓的响应式网页就是，同样的一个网址，在电脑，平板，手机浏览的时候，样式更着改变，这就是简单的一个解释，更合理的解释就是，网页根据屏幕的大小会变得自适应，就会让网站看起来很自然。同样可以根据屏幕分辨率展示或者移除某些元素块。使在窄屏中简化网页，在宽屏中充盈网页，使其看起来更加美观。
之前我的网站都是基于我自己的电脑屏幕分辨率1366x768设计而来，所以对于一些1024及以下电脑看起来不太和谐，今天花了点时间，重构网页结构，增加其响应式功能。
其实制作响应式主题网页并不难，之前想得太复杂一直没下手。当你动起手来的时候就会发现就只是一小段css3而已。
制作响应式主题首先要对自己的网站结构非常熟悉，最好就用谷歌浏览器的审查元素查看，非常有层次感，哪层包含哪层一目了然，把大致的结构（div布局）记在心中或者摘抄下来。然后选一个外围div层（用#content做例子），用css固定其大小，然后把里面的所有的div层宽度全部用百分比表示。这样做的目的是为了简化整体响应式制作的难度。
把里面的div元素调好之后，那么里面的div后续将不会劳烦我们，因为只要修改外围#content的宽度就可以了，里面的都会牵一发动全身跟着变换大小。所以后续我们只要在外围的#content上做功夫。
当然外围的的那个#content容器的宽度你也可以设置成百分比，但事实并不是每一个分辨率下网页内部结构的布局都是完美状态，我们需要选几个屏幕分辨率点打造完美状态。
然后在css中加入：
#content{overflow:hidden;} @media screen and (min-width: 1367px) {/*分辨率大于等于1367的时候*/ #content {width: 1021px} } @media screen and (max-width: 1200px) {/*分辨率小于等于1200的时候*/ #content {width: 950px} } @media screen and (max-width: 1024px) {/*分辨率小于等于1024的时候*/ #content {width: 807px} } @media screen and (max-width: 800px) {/*分辨率小于等于800的时候*/ #content {width: 500px;} } @media screen and (max-width: 500px) {/*分辨率小于等于500的时候*/ #content {width: 356px;} } /*弹性媒体*/ img,embed,object,iframe,table,td,tr,tbody{max-width: 100%;}
加入后我们在浏览器上打上我们的网址，把窗口调到不同大小，看看哪些元素还需要修改，做一些小修小补，该要的要，不该要的去掉,具体效果请看本站。
因为这是基于css3的效果，所以要使它兼容ie等浏览器，需要在网页的头部位置<head>与</head>之间加上
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
最后，别忘了在网页的头部位置<head>与</head>之间加上
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
附：电脑不同尺寸主流分辨率参考：
电脑：2048*1152；1920*1080；1680*1050；1600*900；1440*900；1366*768；1280*800；1024*768；
移动：480*800；960*640。