视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > 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.     } 
  13. } 

[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.  
  10. .main img { 
  11.     width:100%; 
  12. } 
  13.  
  14. h1{ 
  15.     font-size:1.625em; 
  16. } 
  17.  
  18. h2{ 
  19.     font-size:1.375em; 
  20. } 
  21.  
  22. .header { 
  23.     padding:1.0121457489878542510121457489879%; 
  24.     background-color:#f1f1f1; 
  25.     border:1px solid #e9e9e9; 
  26. } 
  27.  
  28. .menuitem { 
  29.     margin:4.310344827586206896551724137931%; 
  30.     margin-left:0; 
  31.     margin-top:0; 
  32.     padding:4.310344827586206896551724137931%; 
  33.     border-bottom:1px solid #e9e9e9; 
  34.     cursor:pointer; 
  35. } 
  36.  
  37. .main { 
  38.     padding:2.0661157024793388429752066115702%; 
  39. } 
  40.  
  41. .right { 
  42.     padding:4.310344827586206896551724137931%; 
  43.     background-color:#CDF0F6; 
  44. } 
  45.  
  46. .footer { 
  47.     padding:1.0121457489878542510121457489879%; 
  48.     text-align:center; 
  49.     background-color:#f1f1f1; 
  50.     border:1px solid #e9e9e9; 
  51.     font-size:0.625em; 
  52. } 
  53.  
  54. .gridcontainer { 
  55.     width:100%; 
  56. } 
  57.  
  58. .gridwrapper { 
  59.     overflow:hidden; 
  60. } 
  61.  
  62. .gridbox { 
  63.     margin-bottom:2.0242914979757085020242914979757%; 
  64.     margin-right: 2.0242914979757085020242914979757%; 
  65.     float:left; 
  66. } 
  67.  
  68. .gridheader { 
  69.     width:100%; 
  70. } 
  71.  
  72. .gridmenu { 
  73.     width:23.481781376518218623481781376518%; 
  74. } 
  75.  
  76. .gridmain { 
  77.     width:48.987854251012145748987854251012%; 
  78. } 
  79.  
  80. .gridright { 
  81.     width:23.481781376518218623481781376518%; 
  82.     margin-right:0; 
  83. } 
  84.  
  85. .gridfooter { 
  86.     width:100%; 
  87.     margin-bottom:0; 
  88. } 
  89.  
  90. @media only screen and (max-width: 500px) { 
  91.     .gridmenu { 
  92.         width:100%; 
  93.     } 
  94.  
  95.     .menuitem { 
  96.         margin:1.0121457489878542510121457489879%; 
  97.         padding:1.0121457489878542510121457489879%; 
  98.     } 
  99.  
  100.     .gridmain { 
  101.         width:100%; 
  102.     } 
  103.  
  104.     .main { 
  105.         padding:1.0121457489878542510121457489879%; 
  106.     } 
  107.  
  108.     .gridright { 
  109.         width:100%; 
  110.     } 
  111.  
  112.     .right { 
  113.         padding:1.0121457489878542510121457489879%; 
  114.     } 
  115.  
  116.     .gridbox { 
  117.         margin-right:0; 
  118.         float:left; 
  119.     } 
  120. } 
  121.  
  122. </style> 
  123. </head> 
  124. <body> 
  125. <div class="gridcontainer"> 
  126.     <div class="gridwrapper"> 
  127.         <div class="gridbox gridheader"> 
  128.             <div class="header"> 
  129.                 <h1>The Pulpit Rock</h1> 
  130.             </div> 
  131.         </div> 
  132.         <div class="gridbox gridmenu"> 
  133.             <div class="menuitem">The Drive</div> 
  134.             <div class="menuitem">The Walk</div> 
  135.             <div class="menuitem">The Return</div> 
  136.             <div class="menuitem">The End</div> 
  137.         </div> 
  138.         <div class="gridbox gridmain"> 
  139.             <div class="main"> 
  140. <h1>The Walk</h1> 
  141. <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> 
  142. <img src="pulpitrock.jpg" alt="Pulpit rock" width="" height=""> 
  143.  
  144.             </div> 
  145.         </div> 
  146.         <div class="gridbox gridright"> 
  147.             <div class="right"> 
  148. <h2>What?</h2> 
  149. <p>The Pulpit Rock is a part of a mountain that looks like a pulpit.</p> 
  150. <h2>Where?</h2> 
  151. <p>The Pulpit Rock is in Norway</p> 
  152. <h2>Price?</h2> 
  153. <p>The walk is free!</p> 
  154.             </div> 
  155.         </div> 
  156.         <div class="gridbox gridfooter"> 
  157.             <div class="footer"> 
  158. <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> 
  159.             </div> 
  160.         </div> 
  161.     </div> 
  162. </div> 
  163. </body> 
  164. </html> 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器