Css 移动设备的模态分析

你好

我有自己的.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;
}

然而，在手机上看起来是这样的

---

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

我想出了两种方法来存档此文件：

1） 使用

.modal{
/*原始代码*/
}
@介质（最大宽度：622px）{
.莫代尔{
左：5%；
左边距：0px；
宽度：90%；
}
}

622px

是

560px/0.9

的结果

2） 使用百分比和

max-

CSS属性

一些文本

.modal包装器{
位置：固定；
排名前10%；
左：50%；
宽度：560px；
最大宽度：90%；
溢出：可见；
z指数：1050；
}
.莫代尔{
位置：相对位置；
宽度：100%；
左边缘：-50%；
/*背景颜色和材料*/
}

方法1对代码的更改最少，但如果您改变了对

560px

限制的想法，您还必须处理媒体查询

max width

值

---

方法2对您的代码进行了相当大的更改，但是如果您改变了对

560px

限制的想法，您应该能够快速（甚至）更改它。

您的模式css中有一个固定的宽度。考虑媒体查询，根据删除者的屏幕宽度设置适当的宽度，或者使用一%的宽度，设置最大宽度，这样桌面屏幕不会太大。例如宽度：90%；最大宽度：560px；msturdy提到的媒体查询示例：