视频(Video) |
您所在的位置：网站首页 › css视频代码 › 视频(Video) |
|
视频(Video)响应式 Web 设计 - 视频(Video)使用 width 属性 如果 width 属性设置为 100%，视频播放器会根据屏幕大小自动调整比例： 实例 php 中文网 video { width: 100%; height: auto; } 您的浏览器不支持HTML5视频。调整浏览器窗口大小查看视频播放器变化 运行实例 »点击 "运行实例" 按钮查看在线实例 注意在以上实例中，视频播放器根据屏幕大小自动调整比例，且可以比原始尺寸大。更多情况下我们可以使用 max-width 属性来替代。 使用 max-width 属性如果 max-width 属性设置为 100%, 视频播放器会根据屏幕自动调整比例，但不会超过其原始大小： 实例 php 中文网 video { max-width: 100%; height: auto; } 您的浏览器不支持HTML5视频。调整浏览器窗口大小，在宽度小于 400px 时，查看视频播放器的变化。 运行实例 »点击 "运行实例" 按钮查看在线实例 在网页中添加视频我们可以在网页中添加视频。以下实例视频根据 div 区域大小自动调整并占满整个 div 区域： 实例 php 中文网 * { box-sizing: border-box; } video { width: 100%; height: auto; } .row:after { content: ""; clear: both; display: block; } [class*="col-"] { float: left; padding: 15px; width: 100%; } @media only screen and (min-width: 600px) { .col-s-12 {width: 8.33%;} .col-s-2 {width: 16.66%;} .col-s-3 {width: 25%;} .col-s-4 {width: 33.33%;} .col-s-5 {width: 41.66%;} .col-s-6 {width: 50%;} .col-s-7 {width: 58.33%;} .col-s-8 {width: 66.66%;} .col-s-9 {width: 75%;} .col-s-10 {width: 83.33%;} .col-s-11 {width: 91.66%;} .col-s-12 {width: 100%;} } @media only screen and (min-width: 768px) { .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} } html { font-family: "Lucida Sans", sans-serif; } .header { background-color: #9933cc; color: #ffffff; padding: 15px; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 7px; background-color :#33b5e5; color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .menu li:hover { background-color: #0099cc; } .aside { background-color: #33b5e5; padding: 15px; color: #ffffff; text-align: center; font-size: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .footer { background-color: #0099cc; color: #ffffff; text-align: center; font-size: 12px; padding: 15px; } 复制代码，在浏览器上运行，查看效果！ Chania The Flight The City The Island The Food The Cityphp中文网--弹性盒子布局flex 您的浏览器不支持HTML5视频。 What?Chania is a city on the island of Crete. Where?Crete is a Greek island in the Mediterranean Sea. How?You can reach Chania airport from all over Europe. Resize the browser window to see how the content respond to the resizing. 运行实例 »点击 "运行实例" 按钮查看在线实例 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |