響應(yīng)式 Web 設(shè)計(jì) – 視頻(Video)

2020-11-11 16:21 更新

響應(yīng)式 Web 設(shè)計(jì) - 視頻(Video)


使用 width 屬性

如果 width 屬性設(shè)置為 100%,視頻播放器會根據(jù)屏幕大小自動(dòng)調(diào)整比例:

實(shí)例

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

嘗試一下 ?

注意在以上實(shí)例中,視頻播放器根據(jù)屏幕大小自動(dòng)調(diào)整比例,且可以比原始尺寸大。更多情況下我們可以使用 max-width 屬性來替代。


使用 max-width 屬性

如果max-width 屬性設(shè)置為 100%, 視頻播放器會根據(jù)屏幕自動(dòng)調(diào)整比例,但不會超過其原始大小:

實(shí)例

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

嘗試一下 ?

在網(wǎng)頁中添加視頻

我們可以在網(wǎng)頁中添加視頻。以下實(shí)例視頻根據(jù) div 區(qū)域大小自動(dòng)調(diào)整并占滿整個(gè) div 區(qū)域:

實(shí)例

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

嘗試一下 ?


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號