【发布时间】：2018-04-28 04:28:21
【问题描述】：
我想为滚动幻灯片创建媒体查询，以便图像在 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>
【问题讨论】：
标签： css media-queries slideshow slide