首页 >> 要闻 >

响应式web设计报告（响应式）

2024-01-02 18:10:15 来源：用户：

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

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、

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、

15、

16、

17、 </style>

18、 <body>

19、 <div id="pagewrap">

20、 <header id="header"></header>

21、 <div id="content"></div>

22、 <aside id="sidebar"></aside>

23、 <footer id="footer"></footer>

24、 </div>

25、 </body>

26、</html>

27、创建media-queries.css

28、body{margin:0;}

29、 #pagewrap{width:980px;margin: 0 auto;border:3px dotted orange;}

30、 #header{height:100px;border:1px solid black;margin-bottom:20px;}

31、 #content{height:700px;border:1px solid green;

32、 background: #fff;

33、 margin: 30px 0 30px;

34、 padding: 20px 35px;

35、 width: 600px;

36、 float: left;

37、 /* rounded corner */

38、 -webkit-border-radius: 8px;

39、 -moz-border-radius: 8px;

40、 border-radius: 8px;

41、 /* box shadow */

42、 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);

43、 -moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);

44、 box-shadow: 0 1px 3px rgba(0,0,0,.4);

45、 }

46、 #sidebar{height:700px;border:1px solid blue;

47、 width: 280px;

48、 float: right;

49、 margin: 30px 0 30px;}

50、 #footer{clear:both;height:50px;border:1px solid yellow;}

51、/************************************************************************************

52、smaller than 980

53、*************************************************************************************/

54、@media screen and (max-width: 980px) {

55、 #header {

56、 height: auto;

57、 }

58、

59、 /* pagewrap */

60、 #pagewrap {

61、 width: 95%;

62、 }

63、 /* content */

64、 #content {

65、 width: 60%;

66、 padding: 3% 4%;

67、 }

68、 /* sidebar */

69、 #sidebar {

70、 width: 30%;

71、 }

72、}

73、/************************************************************************************

74、smaller than 650

75、*************************************************************************************/

76、@media screen and (max-width: 650px) {

77、 /* header */

78、 #header {

79、 height: auto;

80、 }

81、

82、 /* content */

83、 #content {

84、 width: auto;

85、 float: none;

86、 margin: 20px 0;

87、 }

88、 /* sidebar */

89、 #sidebar {

90、 width: 100%;

91、 margin: 0;

92、 float: none;

93、 }

94、}

95、/************************************************************************************

96、smaller than 560

97、*************************************************************************************/

98、@media screen and (max-width: 480px) {

99、 /* disable webkit text size adjust (for iPhone) */

100、 html {

101、 -webkit-text-size-adjust: none;

102、 }

103、}

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

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