首页
站长论坛BBS
救助
投稿
discuz视频教程
discuz技术支持
版块
登录
快速注册

如何制作自适应网页

网友投稿 2015-6-7 [HTML5] 来自PC 复制链接
102680
discuz使用视频教程
31idc

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
1、在网页代码的头部,加入一行viewport元标签。

<meta name="viewport" content="width=device-width,initial-scale=1" />
viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

2、由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。对图像来说也是这样。

具体说,CSS代码不能指定像素宽度:
width:xxx px;
只能指定百分比宽度:
width: xx%;
或者
width:auto;

3、字体也不能使用绝对大小(px),而只能使用相对大小(em)。

例如:
body {font: normal 100% Helvetica, Arial,sans-serif;}
上面的代码指定,字体大小是页面默认大小的100%,即16像素。

4、流动布局(fluid grid)

"流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。
.main {float: right;width: 70%; }
.leftBar {float: left;width: 25%;}
float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

5、"自适应网页设计"的核心,就是CSS3引入的MediaQuery模块。

它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。
<link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="tinyScreen.css" />
上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。
<link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="smallScreen.css" />
如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。

推荐阅读:自适应网页设计的必要知识点

参考下面的例子——我称它为“盒子”
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <!-- viewport meta to reset iPhone inital scale -->
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Demo: Responsive Design in 3 Steps</title>
  8. <!-- css3-mediaqueries.js for IE8 or older -->
  9. <!--[if lt IE 9]>
  10. <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  11. <![endif]-->
  12. <style type="text/css">
  13. body {
  14. font: 1em/150% Arial, Helvetica, sans-serif;
  15. }
  16. a {
  17. color: #669;
  18. text-decoration: none;
  19. }
  20. a:hover {
  21. text-decoration: underline;
  22. }
  23. h1 {
  24. font: bold 36px/100% Arial, Helvetica, sans-serif;
  25. }
  26. /************************************************************************************
  27. STRUCTURE
  28. *************************************************************************************/
  29. #pagewrap {
  30. padding: 5px;
  31. width: 960px;
  32. margin: 20px auto;
  33. }
  34. #header {
  35. height: 180px;
  36. }
  37. #content {
  38. width: 600px;
  39. float: left;
  40. }
  41. #sidebar {
  42. width: 300px;
  43. float: right;
  44. }
  45. #footer {
  46. clear: both;
  47. }
  48. /************************************************************************************
  49. MEDIA QUERIES
  50. *************************************************************************************/
  51. /* for 980px or less */
  52. @media screen and (max-width: 980px) {
  53. #pagewrap {
  54. width: 94%;
  55. }
  56. #content {
  57. width: 65%;
  58. }
  59. #sidebar {
  60. width: 30%;
  61. }
  62. }
  63. /* for 700px or less */
  64. @media screen and (max-width: 700px) {
  65. #content {
  66. width: auto;
  67. float: none;
  68. }
  69. #sidebar {
  70. width: auto;
  71. float: none;
  72. }
  73. }
  74. /* for 480px or less */
  75. @media screen and (max-width: 480px) {
  76. #header {
  77. height: auto;
  78. }
  79. h1 {
  80. font-size: 24px;
  81. }
  82. #sidebar {
  83. display: none;
  84. }
  85. }
  86. /* border & guideline (you can ignore these) */
  87. #content {
  88. background: #f8f8f8;
  89. }
  90. #sidebar {
  91. background: #f0efef;
  92. }
  93. #header, #content, #sidebar {
  94. margin-bottom: 5px;
  95. }
  96. #pagewrap, #header, #content, #sidebar, #footer {
  97. border: solid 1px #ccc;
  98. }
  99. </style>
  100. </head>
  101. <body>
  102. <div id="pagewrap">
  103. <div id="header">
  104. <h1>Header</h1>
  105. <p>Tutorial by <a href="http://webdesignerwall.com">Web Designer Wall</a> (read <a href="http://webdesignerwall.com/tutorials/responsive-design-in-3-steps">related article</a>)</p>
  106. </div>
  107. <div id="content">
  108. <h2>Content</h2>
  109. <p>text</p>
  110. <p>text</p>
  111. <p>text</p>
  112. <p>text</p>
  113. <p>text</p>
  114. <p>text</p>
  115. <p>text</p>
  116. <p>text</p>
  117. <p>text</p>
  118. <p>text</p>
  119. </div>
  120. <div id="sidebar">
  121. <h3>Sidebar</h3>
  122. <p>textg</p>
  123. <p>fgs</p>
  124. <p>fgsg</p>
  125. <p>dg</p>
  126. <p>dfgfd</p>
  127. <p>是否感到反感</p>
  128. <p>sgrtg</p>
  129. <p>分公司</p>
  130. <p>sgf</p>
  131. <p>text</p>
  132. </div>
  133. <div id="footer">
  134. <h4>Footer</h4>
  135. </div>
  136. </div>
  137. </body>
  138. </html>
复制代码



上一篇:自适应网页设计的必要知识点
下一篇:网页制作时,如何在网页中插入表格?
Discuz!技术支持    站帮网全心全意为站长提供简单易懂的快速建站教程
失物认领 发表于 2015-6-8 15:16:08 来自PC
谢谢楼主分享
www.shiwurenling.com失物认领网
zgny 发表于 2015-6-9 13:04:15 来自PC
强烈支持,站帮网有你更精彩
筱黑 发表于 2015-6-11 06:26:05 来自PC
这个不错,值得看一下!
wills001 发表于 2015-6-11 12:16:32 来自PC
学习了 谢谢楼主分享
wills001 发表于 2015-6-11 15:07:54 来自PC
已经看了第二遍了  很不错
巴中热线 发表于 2015-6-12 10:57:04 来自PC
学习了,提高网页知识做好小站长
zixun 发表于 2015-6-13 12:38:16 来自PC
极好  的  来学习的呢 嘻嘻嘻  点个赞
http://www.6061666.com/html/news
l8821686 发表于 2015-6-16 11:09:42 来自PC
赞!很好很强大!!!
aihou 发表于 2015-6-16 17:02:33 来自PC
html还没有完全学会呢
http://www.xycywl.com
http://www.zzhrjjx.com
htt
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表