响应式 Web 设计 - 视频(Video)

使用 CSS ,我们可以给视频添加响应式设计

使用 width 属性

如果 width 属性设置为 100%,视频播放器会根据屏幕大小自动调整比例

video {
    width: 100%;    height: auto;
}

运行范例 »

上面的范例中,视频播放器根据屏幕大小自动调整比例,且可以比原始尺寸大

更多情况下我们可以使用 max-width 属性来替代

使用 max-width 属性

如果 max-width 属性设置为 100%, 视频播放器会根据屏幕自动调整比例,但不会超过其原始大小

video {
    max-width: 100%;
    height: auto;
}

运行范例 »

在网页中添加视频

我们可以在网页中添加视频

下面的范例中的视频根据 div 区域大小自动调整并占满整个 div 区域

video {
    width: 100%;
    height: auto;
}

运行范例 »

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.