響應式 Web 設計 – 視訊(Video)

使用 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;
}