我目前正在開發一個使用自動播放視頻背景的網站，但是這在移動設備上的擴展性很差，并且只位于螢屏的前三分之一......
是否可以在 CSS 中檢測移動用戶，并將背景更改為合適的肖像影像？
您可以在此處查看網頁：https ://content.obstrude.com/login
如您所見，該視頻在 PC 上運行良好，但在移動設備上卻占據了螢屏的上三分之一！
video {
width: 100%;
height: auto;
object-fit: cover;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
img {
opacity: 0;
filter: alpha(opacity=50);
/* For IE8 and earlier */
}<html>
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<title>
OBSTRUDE - LOGIN
</title>
</head>
<body onload="document.body.style.opacity='1'">
<video autoplay playsinline muted>
<source src="/static/img/login.mp4" type="video/mp4">
</video>
</body>
</html>uj5u.com熱心網友回復：
是的，您可以使用媒體查詢來檢測窄螢屏寬度。
像這樣的東西：
// this would affect screen widths up to 600px
@media screen and (max-width: 600px) {
.className {
/* put your mobile styles here */
}
}
查看這篇關于此事的文章https://css-tricks.com/a-complete-guide-to-css-media-queries/
對于您的確切用例，我建議完全取消視頻，而是使用 css 影片來實作相同的效果。然后，您可以將它們調整為也以您想要的方式在移動設備上制作影片。
uj5u.com熱心網友回復：
這是一個使用media-queries.
調整瀏覽器大小以使其正常作業。
video {
width: 100%;
height: auto;
object-fit: cover;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
img {
opacity: 0;
max-width: 100%;
width: 100%;
height: auto;
object-fit: cover;
position: fixed;
z-index: 1;
top: 0;
left: 0;
/* For IE8 and earlier */
}
@media only screen and (max-width: 600px) {
img {
opacity: 1;
}
video {
opacity: 0;
}
}<html>
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<title>
OBSTRUDE - LOGIN
</title>
</head>
<body onload="document.body.style.opacity='1'">
<video autoplay playsinline muted>
<source src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
</video>
<img src="https://dummyimage.com/600x400/000/fff&text=Could also use this as poster.">
</body>
</html>uj5u.com熱心網友回復：
您還可以根據螢屏大小切換display屬性，none反之亦然block，以在視頻和影像之間切換。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
img {
display: none;
}
@media screen and (max-width: 480px) {
video {
display: none;
}
img {
display: block;
}
}
</style>
</head>
<body>
<div>
<video autoplay muted>
<source src="sample.mp4" type="video/mp4" />
</video>
<img src="https://via.placeholder.com/300" />
</div>
</body>
</html>
uj5u.com熱心網友回復：
video {
width: 100%;
height: auto;
object-fit: cover;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
img {
display: none;
}
@media screen and (max-width: 480px) {
video {
display: none;
}
img {
display: block;
}
}<html>
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<title>
OBSTRUDE - LOGIN
</title>
</head>
<body onload="document.body.style.opacity='1'">
<video autoplay playsinline muted>
<source src="/static/img/login.mp4" type="video/mp4">
</video>
<img src="/static/img/image.png">
</body>
> You just need to make display hide and show when you want.For example at mobile view you can simply make display of video none and for image make it display block
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/445450.html
下一篇：更改視窗大小時更改img位置