Question

请一些人告诉我如何使这个模态响应。这是Modal及其内容的Html代码。

<div class="modal-content">
    <span class="close">&times;</span>
    <br/>
    <div class = "modal_img">
        <img id = "modal_pic" src="resources/images/round/aqua.jpg">
    </div>
    <div class = "modal_desc">
        <h3>PRODUCT DESCRIPTION</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <div class="colors">
    </div>
</div>

这是模态元素及其内容的CSS。有人可以告诉我如何更改这些以使其响应非常感谢你的帮助：

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: red;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover, .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal_img{
    margin:20px 40px;
    width: 25%;
    height: 430px;
    display: inline-block;
}

#modal_pic{
    margin:auto;
    width: 100%;
    height: 100%;
    border: solid black;
}

.modal_desc{
    width: 30%;
    float: right;
    margin-top: 20px;
    margin-right: 20%;
    display: inline-block;
}

如何使其响应。

Answer 1

在您的css文档中使用其中一些：

@media all and (max-width: 900px) {
    .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 100px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

另外使用firefox（F12）有一个很好的响应式设计视图，这样你就可以更轻松地测试你的网站

使用@media标签，您必须首先考虑它在移动设备上的样子，然后使用@media标签更改网站寻找更大的设备的方式

如何使这个模态及其内容响应？

1 个答案: