CSS響應視頻的方法

這篇文章主要講解了“CSS響應視頻的方法”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS響應視頻的方法”吧！

1、響應視頻

響應視頻CSS技巧是在tjkdesign.com發現的，能夠使得視頻嵌入并從全角擴大到邊界。

.video {

position: relative;

padding-bottom: 56.25%;

height: 0;

overflow: hidden;

}

.video iframe,

.video object,

.video embed {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

2、最小和最大寬度

可以設置元素的最大寬度，目的是防止元素超出邊界。

智能社 撰稿，交流加扣裙：533319658

?最大寬度

下面示例中，我們用800 px的容器，規定不超過邊界寬度的90%。

.container {

width: 800px;

max-width: 90%;

}

?響應式圖片

你可以設置最大寬度:100%，高度:默認，自動調整圖像的最大寬度邊界。

img {

max-width: 100%;

height: auto;

}

上面的響應圖像只能在CSS IE7和IE9中適用，但在IE8不起作用。要使用的話，需設置寬度:自動，你也可以專門為IE8申請一個特殊CSS條件，或使用如下的IE hack:

@media screen {

img {

width: auto; /* for ie 8 */

}

}

?最小寬度

最小寬度和最大寬度是相對的，在下面的示例中，最小寬度用于在輸入文本字段時，防止輸入值按比例縮小時非常小。

3、相對值

在響應設計中，知道何時使用相對值可以簡化CSS，最大化設置好布局結果，下面是一些例子。

?相對邊距

下面是一個關于commentlist的例子，相對左邊距適當空出用于評論區，用百分比值設置一個子列表。如左側所示的屏幕截圖，內容框的列表變得非常小。

?相對字體

相對值(如em或%)，字體大小，行高和邊距都可以調整，例如，可以對所有父元素中的子元素簡單改變字體大小。

?相對比例填充

下面的屏幕截圖顯示，最好使用相對比例填充，而不是固定像素填充。左邊框顯示了使用像素填充而導致不平衡的填充空間，右邊框填充比例顯示內容區域的最大化。

4、Overflow: hidden技巧

這個技巧非常有用，可以從前面元素中清除浮動并保持集合內的內容通過Overflow:hidden運行。

5、word-break

即自動換行屬性，可以使用unbreaking文本(如長URL文本)包裝而不是只在一行運行。

.break-word {

word-wrap: break-word;

}

感謝各位的閱讀，以上就是“CSS響應視頻的方法”的內容了，經過本文的學習后，相信大家對CSS響應視頻的方法這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！