看了一篇不错的自适应网页设计介绍就自己试着做了一下，原文写的确实很好，收获很多。下面放上链接和自己的例子：
链接：http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
对原文知识点的整理：
一、允许网页宽度自动调整 viewport是网页默认的宽度和高度，下面这行代码的意思是，网页宽度默认等于屏幕宽度 width=device-width，原始缩放比例initial-scale=1为1.0，即网页初始大小占 屏幕面积的100%。 <meta name="viewport" content="width=device-width,initial-scale=1"/> 所有主流浏览器都支持这个设置，包括IE9对于那些老式浏览器（主要是IE6、7、8） 需要使用css3-mediaqueries.js <!--[if lt IE 9]> <script src="http://css3-mediaqueries.js.googlecode.com /svn/trunk/css3-mediaqueries.js"></script> <![endif]--> 二、不能使用绝对宽度 由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素 所以css只能指定百分比宽度 三、相对大小的字体 字体也不能使用绝对大小px，只能使用相对大小em body{ font:normal 100% Helvetica,Arial,sans-serif; } 上面的代码指定，字体大小是页面默认大小的100%，即16像素 1em=16px 四、流动布局 流动布局：是说各个区块的位置都是浮动的，不是固定不变的。 float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方 不会在水平方向overflow，避免了水平滚动条的出现 另外，绝对定位的使用也要非常小心 五、选择加载CSS 选择加载CSS：自适应网页设计的核心就是CSS3引入的media query模块 它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件 <link rel="stylesheet" type="text/css" media="screen and (max-device-width:400px)" href="tinyScreen.css"/> 上面代码的意思是，如果屏幕宽度小于400像素，就加载tinyScreen.css文件 <link rel="stylesheet" type="text/css" media="screen and (min-width:400px) and (max-device-width:600px)" href="smallScreen.css"/> 除了用HTML标签加载css文件，还可以在现有css文件中加载 <style> @import url("tinyScreen.css") screen and (max-device-width: 400px); </style> 六、CSS的@media规则 在同一个css文件中，也可以根据不同的屏幕分辨率选择应用不同的CSS规则。 <style> @media screen and (max-device-width: 400px){ .column{ float:none; width:auto; } } </style> 七、图片自适应 实现图片的自动缩放 img{ max-width:100%}
根据以上几点，我完成了自己的自适应设计
屏幕宽度在1300以上
屏幕宽度在600-1300之间的
屏幕宽度在400-600的
屏幕宽度在400以下的
附上代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"/> <title></title> <style> *{ margin:0; padding:0; } #nav{ float:left; width:25%; margin-left:2%; margin-top:0.5em; } #nav img{ width:100%; } #nav .title1{ font-size:1.5em; font-weight:bold; text-align:center; font-family:sans-serif } #nav .title{ font-size:2em; font-weight:bold; text-align:center; font-family:Helvetica,Arial,sans-serif } #nav hr{ border:1px solid gray; margin-top:1em; } #nav .p{ font-size:1em; text-align: center; font-weight:bold; color:crimson; height:20px; margin-top:1em; } #con{ float:right; width:70%; margin-top:4.5em; margin-right:1%; } #con h1{ text-align:center; } #con p{ text-indent: 1.8em; line-height:1.8em; } #con ul{ width:100%; height:auto; } #con ul li img{ width:100%; } #con ul li p{ color:crimson; text-align:center; } #con .right{ display:block; color:gray; text-align:center; } #con hr{ margin-top:2em; } #con ul li:first-child{ margin-left:0; } #con ul li{ list-style-type:none; float:left; height:auto; } @media screen and (min-width: 1300px){ #con ul li{ margin-left:2%; width:15%; } } @media screen and (min-width: 600px) and (max-device-width: 1300px){ #con ul li{ margin-left:4%; width:30%; } #con ul li:nth-child(4){ margin-left:0; } } @media screen and (min-width: 400px) and (max-device-width: 600px){ #nav{ float:none; width:70%; margin:1em auto; } #con{ float:none; width:90%; margin:2em auto; } #con ul li{ margin-left:4%; width:30%; } #con ul li:nth-child(4){ margin-left:0; } } @media screen and (max-device-width: 400px){ #nav{ float:none; width:70%; margin:1em auto; } #con{ float:none; width:90%; margin:2em auto; } #con ul li{ margin-left:2%; width:49%; } #con ul li:nth-child(2n+1){ margin-left:0; } } </style> </head> <body> <div id="nav"> <img src="zs1.png"> <p class="title1">ZhengShuang</p> <p class="title">wuli大脑壳-郑爽</p> <img src="zs2.png"> <hr> <p class="p">kind</p> <hr> <p class="p">beautiful</p> <hr> <p class="p">wise</p> <hr> </div> <div id="con"> <h1>郑爽么么哒(づ￣ 3￣)づ</h1> <br> <p>郑爽，1991年8月22日出生于辽宁省沈阳市，中国内地影视女演员。 2007年，郑爽进入北京电影学院表演系本科班就读。 2009年，郑爽因主演青春剧《一起来看流星雨》而受到关注并正式出道。随后，她又凭借此系列剧获得第25届中国电视金鹰节电视剧最佳女演员提名。 2012年，郑爽凭借个人首部电影《画壁》获得香港电影导演协会年度新演员金奖和第31届香港电影金像奖最佳新人提名。 2014年，郑爽凭借仙侠剧《古剑奇谭》获得第13届电视华鼎奖全国观众最喜欢的影视演员。 2015年，郑爽主演了清宫剧《寂寞空庭春欲晚》；同年，她还相继主演了都市剧《微微一笑很倾城》和动作片《悟空传》。 2016年，郑爽凭借民国剧《抓住彩虹的男人》获得第19届华鼎奖中国近现代题材电视剧最佳女演员。 </p> <hr> <br><br> <ul> <li><img src="ss1.jpg"><p>旋风孝子</p><br></li> <li><img src="ss2.jpg"><p>花儿与少年</p><br></li> <li><img src="ss3.jpg"><p>写真</p><br></li> <li><img src="ss4.jpg"><p>写真</p><br></li> <li><img src="ss5.jpg"><p>相爱穿梭千年</p><br></li> <li><img src="ss6.jpg"><p>翡翠恋人</p><br></li> </ul> <p class="right">@copyright by 辣姐什么鬼</p> </div> </body> </html>
