Question

我正在尝试使div部分对较小的设备响应，但是它不起作用。它只是保持与桌面大小相同的大小。我该怎么办？

 <div class="accordian">
      <ul>
            <li >
                <div class="image_title">
                    <a href="" class="" data-toggle="modal" data-target="#v1">Hello My Name is Opport</a>
                </div> 
                <a href="" class="" data-toggle="modal" data-target="#v1">
                    <img src="images/ss.jpg">
                </a>
            </li>
            <li>

                <div class="image_title">
                    <a href="#"class="" data-toggle="modal" data-target="#2"> Title</a>
                </div>
                <a href="#"class="" data-toggle="modal" data-target="#2">
                    <img src="images/H1pGIHzZ4.jpg"/>
                </a>
            </li>
            <li>
                <div class="image_title">
                    <a href="#" data-toggle="modal" data-target="#3">title</a>
                </div>
                <a href="#"class="" data-toggle="modal" data-target="#3">
                    <img src="images/SynAHSM-4.jpg"/>
                </a>
            </li>
            <li>
                <div class="image_title">
                    <a href="#" class="" data-toggle="modal" data-target="#4">title</a>
                </div>
                <a href="#"class="" data-toggle="modal" data-target="#4">
                    <img src="images/SJESNHGW4.jpg"/>
                </a>
            </li>
            <li>
                <div class="image_title">
                    <a href="#" class="" data-toggle="modal" data-target="#5">title</a>
                </div>
                <a href="#"class="" data-toggle="modal" data-target="#5">
                    <img src="images/ss.jpg"/>
                </a>
            </li>
            <li>
                <div class="image_title">
                    <a href="#"class="" data-toggle="modal" data-target="#6">title</a>
                </div>
                <a href="#"class="" data-toggle="modal" data-target="#6">
                    <img src="images/SynAHSM-4.jpg"/>
                </a>
            </li>
            <li>
                <div class="image_title">
                    <a href="#"class="" data-toggle="modal" data-target="#v7">title</a>
                </div>
                <a href="#"class="" data-toggle="modal" data-target="#v7">
                    <img src="images/SynAHSM-4.jpg"/>
                </a>
            </li>

        </ul>
    </div>

我尝试了媒体查询，但不知道自己在做什么

.accordian {
    width: auto;
    height: auto;
    overflow: hidden;
    margin: 100px auto;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

.accordian ul {
    width: 1200px;
}

.accordian li {
    position: relative;
    display: block;
    width: 160px;
    float: left;
    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.accordian ul:hover li {
    width: 40px;
}

.accordian ul li:hover {
    width: 840px;
}

.accordian li img {
    display: block;
    height: 100%;
    max-width: inherit;
}

/*Image title styles*/
.image_title {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 640px;
}

.image_title a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 20px;
    font-size: 16px;
}

上方是div的CSS

我希望它可以在移动设备上提供触摸幻灯片并适合屏幕

Answer 1

在CSS中按如下所示设置宽度，因此它不会被固定

.accordian ul {
    max-width: 1200px;
}

.accordian li {
    max-width: 160px;

Answer 2

在使用 accordian 之前，您必须添加名为 container 或其他任何内容的新div

与CSS相比，大多数添加媒体以匹配设备屏幕尺寸

代码将是（和您的代码一起）：

 <div class="container"> <!-- start container class -->
    <div class="accordian">
      <ul>
            <li >
                <div class="image_title">
                    <a href="" class="" data-toggle="modal" data-target="#v1">Hello My Name is Opport</a>
                </div> 
                <a href="" class="" data-toggle="modal" data-target="#v1">
                    <img src="images/ss.jpg">
                </a>
            </li>
            <li>

                <div class="image_title">
                    <a href="#"class="" data-toggle="modal" data-target="#2"> Title</a>
                </div>
                <a href="#"class="" data-toggle="modal" data-target="#2">
                    <img src="images/H1pGIHzZ4.jpg"/>
                </a>
            </li>
            <li>
                <div class="image_title">
                    <a href="#" data-toggle="modal" data-target="#3">title</a>
                </div>
                <a href="#"class="" data-toggle="modal" data-target="#3">
                    <img src="images/SynAHSM-4.jpg"/>
                </a>
            </li>
            <li>
                <div class="image_title">
                    <a href="#" class="" data-toggle="modal" data-target="#4">title</a>
                </div>
                <a href="#"class="" data-toggle="modal" data-target="#4">
                    <img src="images/SJESNHGW4.jpg"/>
                </a>
            </li>
            <li>
                <div class="image_title">
                    <a href="#" class="" data-toggle="modal" data-target="#5">title</a>
                </div>
                <a href="#"class="" data-toggle="modal" data-target="#5">
                    <img src="images/ss.jpg"/>
                </a>
            </li>
            <li>
                <div class="image_title">
                    <a href="#"class="" data-toggle="modal" data-target="#6">title</a>
                </div>
                <a href="#"class="" data-toggle="modal" data-target="#6">
                    <img src="images/SynAHSM-4.jpg"/>
                </a>
            </li>
            <li>
                <div class="image_title">
                    <a href="#"class="" data-toggle="modal" data-target="#v7">title</a>
                </div>
                <a href="#"class="" data-toggle="modal" data-target="#v7">
                    <img src="images/SynAHSM-4.jpg"/>
                </a>
            </li>

        </ul>
    </div>
  </div> <!-- end container class -->

对于CSS添加

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 1200px)
.container {
    max-width: 1140px;
}

@media (min-width: 992px)
.container {
    max-width: 960px;
}

@media (min-width: 768px)
.container {
    max-width: 720px;
}

@media (min-width: 576px)
.container {
    max-width: 540px;
}

额外:)如果您想通过容器在页面上添加效果，请添加您的行

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    transition: .5s;
}

关于。

div的响应度

2 个答案: