如何编辑我的幻灯片以使其具有响应性？

Question

Basically, I have created a slideshow that once the user hovers the image, a text box appears.基本上，我创建了一个幻灯片，一旦用户悬停图像，就会出现一个文本框。 However, I have an issue, it is not responsive.但是，我有一个问题，它没有响应。 I have tried editing the media queries but the slideshow stays at its current width and height which makes it not move.我曾尝试编辑媒体查询，但幻灯片保持在其当前的宽度和高度，使其无法移动。 How can I create my slideshow to be responsive so it is viewable on different screen sizes and not contain a horizontal scrollbar?如何创建具有响应性的幻灯片，以便它可以在不同的屏幕尺寸上查看并且不包含水平滚动条？ Any help is appreciated.任何帮助表示赞赏。 Thanks.谢谢。 Here is my code.这是我的代码。

 @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>

Answer 1

You are on the right track but however, put all your media queries in a block at the very end so they will override the relevant style further up the sheet.您走在正确的轨道上，但是，将所有媒体查询放在最后的一个块中，以便它们将覆盖相关样式。

<!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>

如何编辑我的幻灯片以使其具有响应性？

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-03-13 01:16:36

如何编辑我的幻灯片以使其具有响应性？

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-03-13 01:16:36

解决方案1
0 已采纳 2021-03-13 01:16:36