你们好，最近小时发现有诸多的小伙伴们对于响应式布局和自适应布局，响应式这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。
1、 现在响应式很流行，相信很多人也有把网站改成响应式的冲动，废话不多说。现在举一个我总结的简单例子。
2、 创建RWD.html
3、 !doctype html
4、 html
5、 head
6、 meta name='viewport' content='width=device-width; initial-scale=1.0'
7、 link rel='stylesheet' href='media-queries.css' /
8、 !-- html5.js for IE less than 9 --
9、 !--[if lt IE 9]
10、 script src='http://html5shim.googlecode.com/svn/trunk/html5.js'/script
11、 ![endif]--
12、 /head
13、 style type='text/css'
14、 /style
15、 body
16、 div id='pagewrap'
17、 header id='header'/header
18、 div id='content'/div
19、 aside id='sidebar'/aside
20、 footer id='footer'/footer
21、 /div
22、 /body
23、 /html
24、 Create media query. css
25、 body{margin:0;}
26、 #pagewrap{width:980px;margin: 0 auto;border:3px dotted orange;}
27、 #header{height:100px;border:1px solid black;margin-bottom:20px;}
28、 #content{height:700px;border:1px solid green;
29、 background: #fff;
30、 margin: 30px 0 30px;
31、 padding: 20px 35px;
32、 width: 600px;
33、 float: left;
34、 /* rounded corner */
35、 -webkit-border-radius: 8px;
36、 -moz-border-radius: 8px;
37、 border-radius: 8px;
38、 /* box shadow */
39、 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,4);
40、 -moz-box-shadow: 0 1px 3px rgba(0,0,0,4);
41、 box-shadow: 0 1px 3px rgba(0,0,0,4);
42、 }
43、 #sidebar{height:700px;border:1px solid blue;
44、 width: 280px;
45、 float: right;
46、 margin: 30px 0 30px;}
47、 #footer{clear:both;height:50px;border:1px solid yellow;}
48、 /************************************************************************************
49、 smaller than 980
50、 *************************************************************************************/
51、 @media screen and (max-width: 980px) {
52、 #header {
53、 height: auto;
54、 }
55、 /* pagewrap */
56、 #pagewrap {
57、 width: 95%;
58、 }
59、 /* content */
60、 #content {
61、 width: 60%;
62、 padding: 3% 4%;
63、 }
64、 /* sidebar */
65、 #sidebar {
66、 width: 30%;
67、 }
68、 }
69、 /************************************************************************************
70、 smaller than 650
71、 *************************************************************************************/
72、 @media screen and (max-width: 650px) {
73、 /* header */
74、 #header {
75、 height: auto;
76、 }
77、 /* content */
78、 #content {
79、 width: auto;
80、 float: none;
81、 margin: 20px 0;
82、 }
83、 /* sidebar */
84、 #sidebar {
85、 width: 100%;
86、 margin: 0;
87、 float: none;
88、 }
89、 }
90、 /************************************************************************************
91、 smaller than 560
92、 *************************************************************************************/
93、 @media screen and (max-width: 480px) {
94、 /* disable webkit text size adjust (for iPhone) */
95、 html {
96、 -webkit-text-size-adjust: none;
97、 }
98、 }
以上就是响应式这篇文章的一些介绍，希望对大家有所帮助。