Css 简明教程

CSS RWD Videos

类似于图片，视频也可以创建响应性，使得视频可以扩展以填充整个内容区域，同时保持其原始宽高比。

如果指定视频的固定宽度或高度，可能会导致布局问题，例如破坏页面布局、扭曲图片或在视频周围显示黑条。视频周围的黑条被称为 letterboxing （视频顶部和底部）、 pillarboxing （视频左右两侧）和 windowboxing （视频所有侧面）。

CSS RWD Videos - width Property

为了使视频响应和流畅，视频的 * width* 属性被设置为 percentage 值，同时 * height* 属性被设置为 auto 。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   video {
      width: 100%;
      height: auto;
   }
</style>
</head>
<body>
   <p>Resize the browser window to see how the size of the video player will scale.</p>
   <video width="400" controls>
      <source src="foo.mp4" type="video/mp4">
   </video>
</body>
</html>

CSS RWD Videos - max-width Property

为了使视频响应和流畅，视频的 * max-width* 属性被设置为 100% ，它允许视频按设置程度缩小，但绝不会将其放大到超过其原始大小。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   video {
      max-width: 100%;
      height: auto;
   }
</style>
</head>
<body>
   <p>Resize the browser window to see how the size of the video player will scale.</p>
   <video width="400" controls>
      <source src="foo.mp4" type="video/mp4">
   </video>
</body>
</html>

CSS RWD Videos - Within a grid

以下示例演示如何在网格列中使用响应式视频。根据视频的最大宽度值，视频将根据屏幕大小缩小。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   * {
      box-sizing: border-box;
   }

   .title {
      border: 2px solid black;
      padding: 10px;
      background-color: blanchedalmond;
   }

   .grid-one {
      width: 60%;
      float: left;
      padding: 10px;
      border: 2px solid black;
      background-color: darkseagreen;
   }

   .grid-two {
      width: 40%;
      float: left;
      padding: 15px;
      border: 2px solid black;
      background-color: lightgreen;
   }

   ul {
      list-style-type: none;
   }

   li {
      background-color: aqua;
      padding: 5px;
      border: 1px solid black;
      margin: 5px;
   }

   video {
      max-width: 100%;
      height: auto;
   }
</style>
</head>
<body>
   <div class="title">
   <h1>Responsive Web Design</h1>
   </div>

   <div class="grid-two">
   <ul>
      <li>Viewport</li>
      <li>Grid view</li>
      <li>Media queries</li>
      <li>Images</li>
      <li>Videos</li>
      <li>Frameworks</li>
   </ul>
   </div>

   <div class="grid-one">
   <h1>Responsive Videos</h1>
   <p>Alike images, videos can be made responsive too, such that the video should expand to fill the entire content area, while maintaining its original aspect ratio.</p>
   <video width="400" controls>
      <source src="foo.mp4" type="video/mp4">
   </video>
   <p>Resize the browser window to see how the content gets responsive to the resizing.</p>
   </div>
</body>
</html>