响应式布局的简单案例

网络
冬天地上扑的是雪，厚厚的，软软的；房上落的是雪，白皑皑的，又松又软；树上盖的是雪，积雪把树枝压弯了腰。太阳照在雪山上，发出耀眼的光芒。

响应式布局

响应式布局在面对不同分辨率设备灵活性强，在平时的网页设计中基本上都要用到响应式布局设计，它给我们提供了良好的用户浏览页面，能带给我们更好的客户体验，下面给大家分享下我做的一个简单的响应式的布局：

不同的页面会适用不同大小浏览器页面，它会随着分辨率的变化而变化。代码展示如下：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="utf-8"/>
  5. <title></title>
  6. <style>
  7. 　　p{
  8. 　　　　font-size:12px;
  9. 　　}
  10. 　　header{
  11. 　　　　width:100%;
  12. 　　}
  13. 　　headerimg{
  14. 　　　　width:100%;
  15. 　　}
  16. 　　@media(min-width:1300px)and(max-width:1400px){
  17. 　　　　#left{
  18. 　　　　　　float:left;
  19. 　　　　　　width:30%;
  20. 　　　　　　margin:0px50px;
  21. 　　　　}
  22. 　　　　#left#logo-bg{
  23. 　　　　　　margin:10%10%;
  24. 　　　　　　width:80%;
  25. 　　　　　　position:relative;
  26. 　　　　}
  27. 　　　　#left#logo{
  28. 　　　　　　float:left;
  29. 　　　　　　width:12%;
  30. 　　　　　　position:absolute;
  31. 　　　　　　left:13%;
  32. 　　　　　　top:230px;
  33. 　　　　}
  34. 　　　　#leftp{
  35. 　　　　　　margin-bottom:-20px;
  36. 　　　　}
  37. 　　　　#leftp,h4{
  38. 　　　　　　text-align:center;
  39. 　　　　　　color:red;
  40. 　　　　}
  41. 　　　　#right{
  42. 　　　　　　float:left;
  43. 　　　　　　width:60%;
  44. 　　　　　　margin:15%0px;
  45. 　　　　}
  46. 　　　　#righth2{
  47. 　　　　　　text-align:center;
  48. 　　　　}
  49. 　　　　#rightfieldset{
  50. 　　　　　　text-align:center;
  51. 　　　　　　border-left:none;
  52. 　　　　　　border-right:none;
  53. 　　　　　　border-bottom:none;
  54. 　　　　}
  55. 　　　　#rightfieldsetlegend{
  56. 　　　　　　padding:0px20px;
  57. 　　　　}
  58. 　　　　#fen{
  59. 　　　　　　width:100%;
  60. 　　　　　　-webkit-column-count:6;
  61. 　　　　　　-moz-column-count:6;
  62. 　　　　　　-o-column-count:6;
  63. 　　　　　　-ms-column-count:6;
  64. 　　　　　　column-count:6;
  65. 　　　　　　-webkit-column-gap:1em;
  66. 　　　　　　-moz-column-gap:1em;
  67. 　　　　　　-o-column-gap:1em;
  68. 　　　　　　-ms-column-gap:1em;
  69. 　　　　　　column-gap:1em;
  70. 　　　　}
  71. 　　　　#fenimg{
  72. 　　　　　　width:100%;
  73. 　　　　　　border-radius:10px10px10px10px;
  74. 　　　　}
  75. 　　　　#fenp,h4{
  76. 　　　　　　text-align:center;
  77. 　　　　　　color:red;
  78. 　　　　}
  79. 　　　　#fenp{
  80. 　　　　　　margin-bottom:-20px;
  81. 　　　　}
  82. 　　　　#dip{
  83. 　　　　　　text-align:center;
  84. 　　　　}
  85. 　　　　#dipspan{
  86. 　　　　　　　color:red;
  87. 　　　　}
  88. 　　}
  89. 　　@media(min-width:1000px)and(max-width:1300px){
  90. 　　　　#left{
  91. 　　　　　　float:left;
  92. 　　　　　　width:30%;
  93. 　　　　　　margin:0px50px;
  94. 　　　　}
  95. 　　　　#left#logo-bg{
  96. 　　　　　　margin:10%10%;
  97. 　　　　　　width:80%;
  98. 　　　　　　position:relative;
  99. 　　　　}
  100. 　　　　#left#logo{
  101. 　　　　　　width:12%;
  102. 　　　　　　position:absolute;
  103. 　　　　　　left:14%;
  104. 　　　　　　top:190px;
  105. 　　　　}
  106. 　　　　#leftp{
  107. 　　　　　　margin-bottom:-20px;
  108. 　　　　}
  109. 　　　　#leftp,h4{
  110. 　　　　　　text-align:center;
  111. 　　　　　　color:red;
  112. 　　　　}
  113. 　　　　#right{
  114. 　　　　　　float:left;
  115. 　　　　　　width:60%;
  116. 　　　　　　margin:15%0px;
  117. 　　　　}
  118. 　　　　#righth2{
  119. 　　　　　　text-align:center;
  120. 　　　　}
  121. 　　　　#rightfieldset{
  122. 　　　　　　text-align:center;
  123. 　　　　　　border-left:none;
  124. 　　　　　　border-right:none;
  125. 　　　　　　border-bottom:none;
  126. 　　　　}
  127. 　　　　#rightfieldsetlegend{
  128. 　　　　　　padding:0px20px;
  129. 　　　　}
  130. 　　　　#fen{
  131. 　　　　　　width:100%;
  132. 　　　　　　-webkit-column-count:3;
  133. 　　　　　　-moz-column-count:3;
  134. 　　　　　　-o-column-count:3;
  135. 　　　　　　-ms-column-count:3;
  136. 　　　　　　column-count:3;
  137. 　　　　　　-webkit-column-gap:1em;
  138. 　　　　　　-moz-column-gap:1em;
  139. 　　　　　　-o-column-gap:1em;
  140. 　　　　　　-ms-column-gap:1em;
  141. 　　　　　　column-gap:1em;
  142. 　　　　}
  143. 　　　　#fenimg{
  144. 　　　　　　　　width:100%;
  145. 　　　　　　　　border-radius:10px10px10px10px;
  146. 　　　　}
  147. 　　　　#fenp,h4{
  148. 　　　　　　　　text-align:center;
  149. 　　　　　　　　color:red;
  150. 　　　　　　}
  151. 　　　　#fenp{
  152. 　　　　　　　　margin-bottom:-20px;
  153. 　　　　}
  154. 　　　　#dip{
  155. 　　　　　　text-align:center;
  156. 　　　　}
  157. 　　　　#dipspan{
  158. 　　　　　　color:red;
  159. 　　　　}
  160. 　　}
  161. </style>
  162. </head>
  163. <body>
  164. 　　<header>
  165. 　　　　<imgsrc="img/rag.png"/>
  166. 　　</header>
  167. 　　<asideid="left">
  168. 　　　　<imgsrc="img/logo-bg.png"id="logo-bg"/>
  169. 　　　　<imgsrc="img/logo.png"id="logo"/>
  170. 　　　　<hr/>
  171. 　　　　<p>THE</p>
  172. 　　　　<h4>WEBLOCUE</h4>
  173. 　　　　<hr/>
  174. 　　　　<p>THE</p>
  175. 　　　　<h4>WEBLOCUE</h4>
  176. 　　　　<hr/>
  177. 　　　　<p>THE</p>
  178. 　　　　<h4>WEBLOCUE</h4>
  179. 　　　　<hr/>
  180. 　　</aside>
  181. 　　<articleid="right">
  182. 　　　　<h2>“Givemeproblems,givemework.”</h2>
  183. 　　　　<p>Intheyear1878ItookdogreeofDoctorofMediclineoftheUnibertiveoftheLondonandproblemstoNetbodytogothroughthecourse,Intheyear1878ItookdogreeofDoctorofMediclineoftheUnibertiveoftheLondonandproblemstoNetbodytogothroughthecourse,Intheyear1878ItookdogreeofDoctorofMediclineoftheUnibertiveoftheLondonandproblemstoNetbodytogothroughthecourse.</p>
  184. 　　　　<p>Intheyear1878ItookdogreeofDoctorofMediclineoftheUnibertiveoftheLondonandproblemstoNetbodytogothroughthecourse,Intheyear1878ItookdogreeofDoctorofMediclineoftheUnibertiveoftheLondonandproblemstoNetbodytogothroughthecourse,Intheyear1878ItookdogreeofDoctorofMediclineoftheUnibertiveoftheLondonandproblemstoNetbodytogothroughthecourse.</p>
  185. 　　　　<fieldset><legend>victors</legend></fieldset>
  186. 　　　　<divid="fen">
  187. 　　　　　　<imgsrc="img/1.jpg"/>
  188. 　　　　　　<p>SETCOME</p>
  189. 　　　　　　<h4>HOLEMES</h4>
  190. 　　　　　　<imgsrc="img/2.jpg"/>
  191. 　　　　　　<p>SETCOME</p>
  192. 　　　　　　<h4>HOLEMES</h4>
  193. 　　　　　　<imgsrc="img/3.jpg"/>
  194. 　　　　　　<p>SETCOME</p>
  195. 　　　　　　<h4>HOLEMES</h4>
  196. 　　　　　　<imgsrc="img/4.jpg"/>
  197. 　　　　　　<p>SETCOME</p>
  198. 　　　　　　<h4>HOLEMES</h4>
  199. 　　　　　　<imgsrc="img/5.jpg"/>
  200. 　　　　　　<p>SETCOME</p>
  201. 　　　　　　<h4>HOLEMES</h4>
  202. 　　　　　　<imgsrc="img/6.jpg"/>
  203. 　　　　　　<p>SETCOME</p>
  204. 　　　　　　<h4>HOLEMES</h4>
  205. 　　　　</div>
  206. 　　　　<fieldset><legend>*</legend></fieldset>
  207. 　　　　<divid="di">
  208. 　　　　　　<p>Intheyear1878Itook<span>Suingtable</span>dogreeofDoctor</p>
  209. 　　　　　　<p>Whattheyear2016Itookdogree<span>Ruingroid</span>ofDoctor</p>
  210. 　　　　</div>
  211. 　　</article>
  212. </body>
  213. </html>

做的不够严谨，因为时间问题，请见谅。

以上这篇响应式布局的简单案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

原文地址：http://www.cnblogs.com/duzheqiang/p/5666465.html