响应式停靠公交（响应式）

你们好，最近小时发现有诸多的小伙伴们对于响应式停靠公交，响应式这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。

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、 }

以上就是响应式这篇文章的一些介绍，希望对大家有所帮助。

　　免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。 如有侵权请联系删除！