css - 移动丑陋的模态

Question

美好的一天，

我有这样的 .modal CSS 代码

.modal
{
    position: fixed;
    top: 10%;
    left: 50%;
    z-index: 1050;
    width: 560px;
    margin-left: -280px;
    background-color: #fff;
    border: 1px solid #999;
    border: 1px solid rgba(0,0,0,0.3);
    *border: 1px solid #999;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
     border-radius: 6px;
    -webkit-box-shadow: 0 3px 7px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 3px 7px rgba(0,0,0,0.3);
    box-shadow: 0 3px 7px rgba(0,0,0,0.3);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    outline: 0;
}

但是在手机上是这样的

我需要一种调整模式大小的方法。

Answer 1

我想出了两种方法来存档:

1) 使用media query

Live demo

.modal {
/* original code */
}
@media (max-width:622px) {
    .modal {
        left:5%;
        margin-left:0px;
        width:90%;
    }
}

622px是560px/0.9的结果；

2) 使用百分比和 max- CSS 属性

Live demo

<div class="modal-wrapper"><div class="modal">Some text</div></div>

.modal-wrapper {
    position:fixed;
    top:10%;
    left:50%;
    width:560px;
    max-width:90%;
    overflow:visible;
    z-index:1050;
}
.modal {
    position: relative;
    width: 100%;
    margin-left:-50%;
    /* background colors and stuffs */
}

方法 1 对您的代码所做的更改最少，但是如果您改变了对 560px 限制的想法，您还必须注意媒体查询 max-width值；

方法 2 对您的代码进行了相当大的更改，但是如果您改变了对 560px 限制的想法，您应该能够快速更改它(甚至是 with JS )。