@media（最大寬度或最小寬度）用於視頻
[英]@media (max-width or min-width) for video
問題描述
我想問 - 這個 function 用於在給定分辨率下隱藏或顯示圖像（代碼示例） -它也可以應用於視頻嗎？ 謝謝
@media (max-width:375px) { img#eq { display: none; }
<img id="eq" src="assets/images/picture.jpg">
2 個解決方案
解決方案1
0 2021-03-26 21:30:08
Media Queries始終可以在 CSS 中使用，並且適用於 CSS 可以解決的所有問題。 這還包括以下片段所示的視頻。
video { width: 100%; } @media only screen and (max-width: 374px) { video { display: none; } } @media only screen and (min-width: 375px) { video { display: block; } }
<video controls> <source src="https://www.tacoshy.de/stackoverflow/testvideo.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
解決方案2
0 2021-03-27 04:48:15
是的，它會起作用，首先你想在你的 html 頭中添加一個元標記，它看起來像
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
@media（min-width：）和（max-width：）查詢無法正常工作
[英]@media (min-width: ) and (max-width: ) query not working Properly
將媒體查詢從最小寬度更改為使用最大寬度以避免覆蓋？
[英]Changing media queries from min-width to use max-width to avoid overriding?
如何在具有高密度移動設備屏幕的 CSS 媒體查詢中使用 min-width 和 max-width
[英]How to use min-width and max-width in CSS media queries with high density mobile device screens
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.