响应式网页设计 - 视频


使用 width 属性

如果 width 属性设置为100%,则视频播放器将响应并放大和缩小:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <style>
  6. video {
  7. width: 100%;
  8. height: auto;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <video width="400" controls="">
  14. <source src="/example/rwd/shanghai.mp4" type="video/mp4">
  15. 您的浏览器不支持 HTML5 视频。
  16. </source></video>
  17. <p>请调整浏览器窗口的大小,来查看视频播放器如何缩放。</p>
  18. </body>
  19. </html>

请注意,在上面的例子中,视频播放器可以放大到大于其原始尺寸。在许多情况下,更好的解决方案是改用 max-width 属性。


使用 max-width 属性

如果将 max-width 属性设置为 100%,则视频播放器将按比例缩小,但绝不会放大到大于其原始尺寸:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <style>
  6. video {
  7. max-width: 100%;
  8. height: auto;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <video width="400" controls="">
  14. <source src="/example/rwd/shanghai.mp4" type="video/mp4">
  15. 您的浏览器不支持 HTML5 视频。
  16. </source></video>
  17. <p>请调整浏览器窗口的大小,查看宽度小于 400 像素时视频播放器如何缩放。</p>
  18. </body>
  19. </html>

在实例网页中添加视频

我们希望在实例网页中添加视频。视频将被调整大小以便始终占据所有可用空间:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <style>
  6. * {
  7. box-sizing: border-box;
  8. }
  9. video {
  10. width: 100%;
  11. height: auto;
  12. }
  13. .row:after {
  14. content: "";
  15. clear: both;
  16. display: table;
  17. }
  18. [class*="col-"] {
  19. float: left;
  20. padding: 15px;
  21. width: 100%;
  22. }
  23. @media only screen and (min-width: 600px) {
  24. .col-s-1 {width: 8.33%;}
  25. .col-s-2 {width: 16.66%;}
  26. .col-s-3 {width: 25%;}
  27. .col-s-4 {width: 33.33%;}
  28. .col-s-5 {width: 41.66%;}
  29. .col-s-6 {width: 50%;}
  30. .col-s-7 {width: 58.33%;}
  31. .col-s-8 {width: 66.66%;}
  32. .col-s-9 {width: 75%;}
  33. .col-s-10 {width: 83.33%;}
  34. .col-s-11 {width: 91.66%;}
  35. .col-s-12 {width: 100%;}
  36. }
  37. @media only screen and (min-width: 768px) {
  38. .col-1 {width: 8.33%;}
  39. .col-2 {width: 16.66%;}
  40. .col-3 {width: 25%;}
  41. .col-4 {width: 33.33%;}
  42. .col-5 {width: 41.66%;}
  43. .col-6 {width: 50%;}
  44. .col-7 {width: 58.33%;}
  45. .col-8 {width: 66.66%;}
  46. .col-9 {width: 75%;}
  47. .col-10 {width: 83.33%;}
  48. .col-11 {width: 91.66%;}
  49. .col-12 {width: 100%;}
  50. }
  51. html {
  52. font-family: "Lucida Sans", sans-serif;
  53. }
  54. .header {
  55. background-color: #9933cc;
  56. color: #ffffff;
  57. padding: 15px;
  58. }
  59. .menu ul {
  60. list-style-type: none;
  61. margin: 0;
  62. padding: 0;
  63. }
  64. .menu li {
  65. padding: 8px;
  66. margin-bottom: 7px;
  67. background-color: #33b5e5;
  68. color: #ffffff;
  69. box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  70. }
  71. .menu li:hover {
  72. background-color: #0099cc;
  73. }
  74. .aside {
  75. background-color: #33b5e5;
  76. padding: 15px;
  77. color: #ffffff;
  78. text-align: center;
  79. font-size: 14px;
  80. box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  81. }
  82. .footer {
  83. background-color: #0099cc;
  84. color: #ffffff;
  85. text-align: center;
  86. font-size: 12px;
  87. padding: 15px;
  88. }
  89. </style>
  90. </head>
  91. <body>
  92. <div class="header">
  93. <h1>上海</h1>
  94. </div>
  95. <div class="row">
  96. <div class="col-3 col-s-3 menu">
  97. <ul>
  98. <li>交通</li>
  99. <li>文化</li>
  100. <li>旅游</li>
  101. <li>美食</li>
  102. </ul>
  103. </div>
  104. <div class="col-6 col-s-9">
  105. <h1>欢迎来到上海</h1>
  106. <p>上海市,简称沪,别称申,是中华人民共和国直辖市,中国的经济、金融、贸易和航运中心,世界著名的港口城市,是中国人口第二多的城市。</p>
  107. <video width="400" controls="">
  108. <source src="/example/rwd/shanghai.mp4" type="video/mp4">
  109. 您的浏览器不支持 HTML5 视频。
  110. </source></video>
  111. </div>
  112. <div class="col-3 col-s-12">
  113. <div class="aside">
  114. <h2>历史</h2>
  115. <p>最晚在新石器时代,上海地区已经有先民聚居。春秋时代,上海由吴国管辖,战国时代则是楚国领土 ...</p>
  116. <h2>位置</h2>
  117. <p>上海位于中国东部弧形海岸线的正中间,长江三角洲最东部,东临东海,南濒杭州湾,西与江苏、浙江两省相接 ...</p>
  118. <h2>环境</h2>
  119. <p>上海地处江南水乡,并位于长江入海口,亦不处于主要地震带上,因此如地震、洪水以及地质类灾害鲜有发生 ...</p>
  120. </div>
  121. </div>
  122. </div>
  123. <div class="footer">
  124. <p>请调整浏览器窗口的大小,来查看内容如何响应调整大小。</p>
  125. </div>
  126. </body>
  127. </html>

分类导航