基本上，我已经创建了一个幻灯片，一旦用户悬停在图像上，就会出现一个文本框。然而，我有一个问题，它没有回应。我尝试过编辑媒体查询，但幻灯片保持在当前的宽度和高度，因此无法移动。我如何创建响应幻灯片，使其在不同的屏幕大小上都可以查看，而不包含水平滚动条？感谢您的帮助。谢谢这是我的密码。
@media (min-width: 200px) and (max-width: 899px) {
.slidershow{
width: 400px;
height: 400px;
overflow: hidden;
}
}
.slidershow {
width: 700px;
height: 400px;
overflow: hidden;
}
.middle {
position: relative;
top: 200px;
left: 50%;
transform: translate(-50%, -50%);
}
.navigation {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.bar {
width: 50px;
height: 10px;
border: 2px solid #3F69CA;
margin: 6px;
cursor: pointer;
transition: 0.4s;
}
.bar:hover {
background: #3F69CA;
}
input[name="r"] {
position: absolute;
visibility: hidden;
}
.slides {
width: 500%;
height: 100%;
display: flex;
}
.slidess {
width: 20%;
transition: 0.6s;
}
.slidess>h2 {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 30px);
text-align: center;
padding: 15px;
background: rgba(255, 255, 255, .6);
color: rgb(24, 23, 23);
font-size: 18px;
border-radius: 5px;
visibility: hidden;
opacity: 0;
transition: all .5s ease;
z-index: 2;
}
.slides .slidess:hover>h2 {
visibility: visible;
opacity: 1;
}
.slidess img {
width: 100%;
height: 100%;
}
#r1:checked~.s1 {
margin-left: 0;
}
#r2:checked~.s1 {
margin-left: -20%;
}
#r3:checked~.s1 {
margin-left: -40%;
}
#r4:checked~.s1 {
margin-left: -60%;
}
#r1:checked~.navigation [for="r1"] {
background: #fff
}
#r2:checked~.navigation [for="r2"] {
background: #fff
}
#r3:checked~.navigation [for="r3"] {
background: #fff
}
#r4:checked~.navigation [for="r4"] {
background: #fff
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width" name="viewport">
<title>Slideshow</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="slidershow middle">
<div class="slides">
<input checked id="r1" name="r" type="radio"> <input id="r2" name="r" type="radio"> <input id="r3" name="r" type="radio"> <input id="r4" name="r" type="radio">
<div class="navigation">
<label class="bar" for="r1"></label> <label class="bar" for="r2"></label> <label class="bar" for="r3"></label> <label class="bar" for="r4"></label>
</div>
<div class="slidess s1">
<h2>Description 1.</h2><img src="https://tesla-cdn.thron.com/delivery/public/image/tesla/c82315a6-ac99-464a-a753-c26bc0fb647d/bvlatuR/std/1200x628/lhd-model-3-social"></div>
<div class="slidess">
<h2>Description 2.</h2><img src="https://tesla-cdn.thron.com/delivery/public/image/tesla/56cb8c41-e898-44ce-b6b7-fe9b9a05f529/bvlatuR/std/1200x628/MS-Social"></div>
<div class="slidess">
<h2>Description 3.</h2><img src="https://tesla-cdn.thron.com/delivery/public/image/tesla/3863f3e5-546a-4b22-bcbc-1f8ee0479744/bvlatuR/std/1200x628/MX-Social"></div>
<div class="slidess">
<h2>Description 4.</h2><img src="https://www.tesla.com/xNVh4yUEc3B9/04_Desktop.jpg"></div>
</div>
</div>
<script src="script.js">
</script>
</body>
</html>您走在了正确的轨道上，但将所有媒体查询放在最后的一个块中，这样它们就会覆盖相关样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width" name="viewport">
<title>Slideshow</title>
<style>
.slidershow {
width: 700px;
height: 400px;
overflow: hidden;
}
.middle {
position: relative;
top: 200px;
left: 50%;
transform: translate(-50%, -50%);
}
.navigation {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.bar {
width: 50px;
height: 10px;
border: 2px solid #3F69CA;
margin: 6px;
cursor: pointer;
transition: 0.4s;
}
.bar:hover {
background: #3F69CA;
}
input[name="r"] {
position: absolute;
visibility: hidden;
}
.slides {
width: 500%;
height: 100%;
display: flex;
}
.slidess {
width: 20%;
transition: 0.6s;
}
.slidess>h2 {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 30px);
text-align: center;
padding: 15px;
background: rgba(255, 255, 255, .6);
color: rgb(24, 23, 23);
font-size: 18px;
border-radius: 5px;
visibility: hidden;
opacity: 0;
transition: all .5s ease;
z-index: 2;
}
.slides .slidess:hover>h2 {
visibility: visible;
opacity: 1;
}
.slidess img {
width: 100%;
height: 100%;
}
#r1:checked~.s1 {
margin-left: 0;
}
#r2:checked~.s1 {
margin-left: -20%;
}
#r3:checked~.s1 {
margin-left: -40%;
}
#r4:checked~.s1 {
margin-left: -60%;
}
#r1:checked~.navigation [for="r1"] {
background: #fff
}
#r2:checked~.navigation [for="r2"] {
background: #fff
}
#r3:checked~.navigation [for="r3"] {
background: #fff
}
#r4:checked~.navigation [for="r4"] {
background: #fff
}
@media (min-width: 200px) and (max-width: 899px) {
.slidershow{
width: 400px;
height: 400px;
overflow: hidden;
}
}
</style>
</head>
<body>
<div class="slidershow middle">
<div class="slides">
<input checked id="r1" name="r" type="radio"> <input id="r2" name="r" type="radio"> <input id="r3" name="r" type="radio"> <input id="r4" name="r" type="radio">
<div class="navigation">
<label class="bar" for="r1"></label> <label class="bar" for="r2"></label> <label class="bar" for="r3"></label> <label class="bar" for="r4"></label>
</div>
<div class="slidess s1">
<h2>Description 1.</h2><img src="https://tesla-cdn.thron.com/delivery/public/image/tesla/c82315a6-ac99-464a-a753-c26bc0fb647d/bvlatuR/std/1200x628/lhd-model-3-social"></div>
<div class="slidess">
<h2>Description 2.</h2><img src="https://tesla-cdn.thron.com/delivery/public/image/tesla/56cb8c41-e898-44ce-b6b7-fe9b9a05f529/bvlatuR/std/1200x628/MS-Social"></div>
<div class="slidess">
<h2>Description 3.</h2><img src="https://tesla-cdn.thron.com/delivery/public/image/tesla/3863f3e5-546a-4b22-bcbc-1f8ee0479744/bvlatuR/std/1200x628/MX-Social"></div>
<div class="slidess">
<h2>Description 4.</h2><img src="https://www.tesla.com/xNVh4yUEc3B9/04_Desktop.jpg"></div>
</div>
</div>
<script src="script.js">
</script>
</body>
</html>