莫代尔在移动丑陋

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）。