·您当前的位置:主页 > 技术教程 > Html5技术 >

[CSS3]css3的@media查询来制作响应式设计

时间:2017-05-10 09:26酷播
[CSS3]css3的@media查询来制作响应式设计,[CSS3]css3的@media查询来制作响应式设计

[CSS3]css3的@media查询来制作响应式设计

  1. @media only screen and (max-width: 500px) { 
  2.     .gridmenu { 
  3.         width:100%; 
  4.     } 
  5.  
  6.     .gridmain { 
  7.         width:100%; 
  8.     } 
  9.  
  10.     .gridright { 
  11.         width:100%; 
  12.     } 

[CSS3]css3的@media查询来制作响应式设计示例

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
  5. <style> 
  6. body { 
  7.     font-family:"Lucida Sans", Verdana, sans-serif; 
  8.  
  9. .main img { 
  10.     width:100%; 
  11.  
  12. h1{ 
  13.     font-size:1.625em; 
  14.  
  15. h2{ 
  16.     font-size:1.375em; 
  17.  
  18. .header { 
  19.     padding:1.0121457489878542510121457489879%; 
  20.     background-color:#f1f1f1; 
  21.     border:1px solid #e9e9e9; 
  22.  
  23. .menuitem { 
  24.     margin:4.310344827586206896551724137931%; 
  25.     margin-left:0; 
  26.     margin-top:0; 
  27.     padding:4.310344827586206896551724137931%; 
  28.     border-bottom:1px solid #e9e9e9; 
  29.     cursor:pointer; 
  30.  
  31. .main { 
  32.     padding:2.0661157024793388429752066115702%; 
  33.  
  34. .right { 
  35.     padding:4.310344827586206896551724137931%; 
  36.     background-color:#CDF0F6; 
  37.  
  38. .footer { 
  39.     padding:1.0121457489878542510121457489879%; 
  40.     text-align:center; 
  41.     background-color:#f1f1f1; 
  42.     border:1px solid #e9e9e9; 
  43.     font-size:0.625em; 
  44.  
  45. .gridcontainer { 
  46.     width:100%; 
  47.  
  48. .gridwrapper { 
  49.     overflow:hidden; 
  50.  
  51. .gridbox { 
  52.     margin-bottom:2.0242914979757085020242914979757%; 
  53.     margin-right: 2.0242914979757085020242914979757%; 
  54.     float:left; 
  55.  
  56. .gridheader { 
  57.     width:100%; 
  58.  
  59. .gridmenu { 
  60.     width:23.481781376518218623481781376518%; 
  61.  
  62. .gridmain { 
  63.     width:48.987854251012145748987854251012%; 
  64.  
  65. .gridright { 
  66.     width:23.481781376518218623481781376518%; 
  67.     margin-right:0; 
  68.  
  69. .gridfooter { 
  70.     width:100%; 
  71.     margin-bottom:0; 
  72.  
  73. @media only screen and (max-width: 500px) { 
  74.     .gridmenu { 
  75.         width:100%; 
  76.     } 
  77.  
  78.     .menuitem { 
  79.         margin:1.0121457489878542510121457489879%; 
  80.         padding:1.0121457489878542510121457489879%; 
  81.     } 
  82.  
  83.     .gridmain { 
  84.         width:100%; 
  85.     } 
  86.  
  87.     .main { 
  88.         padding:1.0121457489878542510121457489879%; 
  89.     } 
  90.  
  91.     .gridright { 
  92.         width:100%; 
  93.     } 
  94.  
  95.     .right { 
  96.         padding:1.0121457489878542510121457489879%; 
  97.     } 
  98.  
  99.     .gridbox { 
  100.         margin-right:0; 
  101.         float:left; 
  102.     } 
  103.  
  104. </style> 
  105. </head> 
  106. <body> 
  107. <div class="gridcontainer"> 
  108.     <div class="gridwrapper"> 
  109.         <div class="gridbox gridheader"> 
  110.             <div class="header"> 
  111.                 <h1>The Pulpit Rock</h1> 
  112.             </div> 
  113.         </div> 
  114.         <div class="gridbox gridmenu"> 
  115.             <div class="menuitem">The Drive</div> 
  116.             <div class="menuitem">The Walk</div> 
  117.             <div class="menuitem">The Return</div> 
  118.             <div class="menuitem">The End</div> 
  119.         </div> 
  120.         <div class="gridbox gridmain"> 
  121.             <div class="main"> 
  122. <h1>The Walk</h1> 
  123. <p>The walk to the Pulpit Rock will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p> 
  124. <img src="pulpitrock.jpg" alt="Pulpit rock" width="" height=""> 
  125.  
  126.             </div> 
  127.         </div> 
  128.         <div class="gridbox gridright"> 
  129.             <div class="right"> 
  130. <h2>What?</h2> 
  131. <p>The Pulpit Rock is a part of a mountain that looks like a pulpit.</p> 
  132. <h2>Where?</h2> 
  133. <p>The Pulpit Rock is in Norway</p> 
  134. <h2>Price?</h2> 
  135. <p>The walk is free!</p> 
  136.             </div> 
  137.         </div> 
  138.         <div class="gridbox gridfooter"> 
  139.             <div class="footer"> 
  140. <p>This web page is a part of a demonstration of fluid web design made by www.w3schools.com. Resize the browser window to see the content response to the resizing.</p> 
  141.             </div> 
  142.         </div> 
  143.     </div> 
  144. </div> 
  145. </body> 
  146. </html> 

 

热门文章

请稍候...
  • 热身双十一,锁定云视频大聚惠
  • 备战双十一,相约直播超值狂欢
保利威视云直播
保利威视云视频
微信付费直播
酷播云免费在线视频整体解决方案
酷播v4.0网页播放器