我想为滚动幻灯片创建媒体查询，以便图像在1920x1080显示器上以960x540像素的原始分辨率显示;但在1366x768显示器上为768x432。我尝试在媒体查询中插入较小屏幕的关键帧的重新计算值，但它不起作用。
如果有人可以提供帮助，我会非常感激，因为我没有广泛使用媒体查询或动画。希望我能从答案中推断出进一步修改小型设备的幻灯片。
<!DOCTYPE HTML>
<html>
<head>
<style>
.wrapper_video_and_text {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
padding-top: 0px;
justify-content: center;
}
.container_video {
width: 55%;
margin-left: 100px;
}
.wrapper_text {
display: flex;
width: 45%;
overflow: hidden;
min-height: 100%;
justify-content: center;
align-items: center;
}
.video_text {
width: 50%;
font-family: "europa",sans-serif;
font-size: 150%;
letter-spacing: ;
color: black;
font-weight: 500;
line-height: 125%;
}
.flex-container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
padding-top: 0px;
justify-content: center;
align-items: center;
}
#css_slider {
width: 960px;
height: 540px;
overflow: hidden;
}
#slider_images {
width : 12480px;
height: 540px;
overflow: hidden;
/* animation duration: 36s : 13x ~3s display image + 5x ~0.2s slide */
animation: slide 36s infinite;
-moz-animation: slide 36s infinite;
-webkit-animation: slide 36s infinite;
-o-animation: slide 36s infinite;
}
#slider_images img {
float: left;
}
@keyframes slide{
0%{margin-left: 0px;}
4.7%{margin-left: 0px;}
7.7%{margin-left: -960px;}
12.4%{margin-left: -960px;}
15.4%{margin-left: -1920px;}
20.1%{margin-left: -1920px;}
23.1%{margin-left: -2880px;}
27.8%{margin-left: -2880px;}
30.8%{margin-left: -3840px;}
35.5%{margin-left: -3840px;}
38.5%{margin-left: -4800px;}
43.2%{margin-left: -4800px;}
46.2%{margin-left: -5760px;}
50.9%{margin-left: -5760px;}
53.9%{margin-left: -6720px;}
58.6%{margin-left: -6720px;}
61.6%{margin-left: -7680px;}
66.3%{margin-left: -7680px;}
69.3%{margin-left: -8640px;}
74%{margin-left: -8640px;}
77%{margin-left: -9600px;}
81.7%{margin-left: -9600px;}
84.7%{margin-left: -10560px;}
89.4%{margin-left: -10560px;}
92.4%{margin-left: -11520px;}
97.1%{margin-left: -11520px;}
100%{margin-left: 0px;}
}
@-moz-keyframes slide{
0%{margin-left: 0px;}
4.7%{margin-left: 0px;}
7.7%{margin-left: -960px;}
12.4%{margin-left: -960px;}
15.4%{margin-left: -1920px;}
20.1%{margin-left: -1920px;}
23.1%{margin-left: -2880px;}
27.8%{margin-left: -2880px;}
30.8%{margin-left: -3840px;}
35.5%{margin-left: -3840px;}
38.5%{margin-left: -4800px;}
43.2%{margin-left: -4800px;}
46.2%{margin-left: -5760px;}
50.9%{margin-left: -5760px;}
53.9%{margin-left: -6720px;}
58.6%{margin-left: -6720px;}
61.6%{margin-left: -7680px;}
66.3%{margin-left: -7680px;}
69.3%{margin-left: -8640px;}
74%{margin-left: -8640px;}
77%{margin-left: -9600px;}
81.7%{margin-left: -9600px;}
84.7%{margin-left: -10560px;}
89.4%{margin-left: -10560px;}
92.4%{margin-left: -11520px;}
97.1%{margin-left: -11520px;}
100%{margin-left: 0px;}
}
@-webkit-keyframes slide{
0%{margin-left: 0px;}
4.7%{margin-left: 0px;}
7.7%{margin-left: -960px;}
12.4%{margin-left: -960px;}
15.4%{margin-left: -1920px;}
20.1%{margin-left: -1920px;}
23.1%{margin-left: -2880px;}
27.8%{margin-left: -2880px;}
30.8%{margin-left: -3840px;}
35.5%{margin-left: -3840px;}
38.5%{margin-left: -4800px;}
43.2%{margin-left: -4800px;}
46.2%{margin-left: -5760px;}
50.9%{margin-left: -5760px;}
53.9%{margin-left: -6720px;}
58.6%{margin-left: -6720px;}
61.6%{margin-left: -7680px;}
66.3%{margin-left: -7680px;}
69.3%{margin-left: -8640px;}
74%{margin-left: -8640px;}
77%{margin-left: -9600px;}
81.7%{margin-left: -9600px;}
84.7%{margin-left: -10560px;}
89.4%{margin-left: -10560px;}
92.4%{margin-left: -11520px;}
97.1%{margin-left: -11520px;}
100%{margin-left: 0px;}
}
@-o-keyframes slide{
0%{margin-left: 0px;}
4.7%{margin-left: 0px;}
7.7%{margin-left: -960px;}
12.4%{margin-left: -960px;}
15.4%{margin-left: -1920px;}
20.1%{margin-left: -1920px;}
23.1%{margin-left: -2880px;}
27.8%{margin-left: -2880px;}
30.8%{margin-left: -3840px;}
35.5%{margin-left: -3840px;}
38.5%{margin-left: -4800px;}
43.2%{margin-left: -4800px;}
46.2%{margin-left: -5760px;}
50.9%{margin-left: -5760px;}
53.9%{margin-left: -6720px;}
58.6%{margin-left: -6720px;}
61.6%{margin-left: -7680px;}
66.3%{margin-left: -7680px;}
69.3%{margin-left: -8640px;}
74%{margin-left: -8640px;}
77%{margin-left: -9600px;}
81.7%{margin-left: -9600px;}
84.7%{margin-left: -10560px;}
89.4%{margin-left: -10560px;}
92.4%{margin-left: -11520px;}
97.1%{margin-left: -11520px;}
100%{margin-left: 0px;}
}
</style>
</head>
<section class="flex-container">
<div id="css_slider">
<!-- Each image is 960px by 540px -->
<div id="slider_images">
<img src="web_960_lg_edg_water.jpg" alt="water" />
<img src="web_960_lg_edg_blue.jpg" alt="blue" />
<img src="web_960_lg_edg_robins_egg.jpg" alt="robins egg" />
<img src="web_960_lg_edg_23rd_st.jpg" alt="23rd st" />
<img src="web_960_lg_edg_broken_guru.jpg" alt="broken guru" />
<img src="web_960_lg_edg_i_will_miss_you.jpg" alt="i will miss you" />
<img src="web_960_lg_edg_pants.jpg" alt="pants" />
<img src="web_960_lg_edg_nose.jpg" alt="nose" />
<img src="web_960_lg_edg_swirls.jpg" alt="swirls" />
<img src="web_960_lg_edg_church_ave.jpg" alt="church ave" />
<img src="web_960_lg_edg_network_reality_stars.jpg" alt="network reality all stars" />
<img src="web_960_lg_edg_ports.jpg" alt="ports" />
<img src="web_960_lg_edg_kline.jpg" alt="kline" />
</div>
</div>
<div class="wrapper_text">
<div class="video_text">
<p>text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here </p>
</div>
</div>
</section>
</html>
答案 0 :(得分：0)
我将尝试帮助，因为我仍然在这里学习，但我相信您需要定义媒体查询和您正在呼叫的选择器的属性。此外，如果您希望元素堆叠在彼此之上，请删除浮动（如果存在）。
用这样的东西去做并重复一遍。如果有效，请告诉我。感谢
/* Media Queries */
@media screen and (max-width: 432px) , screen and (max-height: 768px) {
#slider_images {
width: 1920px;
height: 1080px;
}