javascript - 使用 css 和 jquery 的响应式弹出通知

Question

在我的网页中，我创建了一个新的通知中心弹出窗口，但我不明白如何将我的 css 从“正常模式”更改为“响应模式”。

这是我的弹出窗口:

打开通知中心的图标

在“大”网页中，我看到弹出窗口如下

如果我在移动浏览器中打开该页面，我会看到如下弹出窗口

这是我的 css 和 html 代码:

<div>
    <div id="noti_Container">
        <div id="noti_Button">
           <button></button>
        </div>
        <div id="notifications" style="margin-top: 13px;">
             <h3>Notifiche</h3>
             <div style="height:200px;"></div>
        </div>
     </div>
</div>


#noti_Container
{
    position:relative;
}

#notifications {
    display:none;
    width:330px;
    position:absolute;
    top:30px;
    right:-30;
    background:#FFF;
    border:solid 1px rgba(100, 100, 100, .20);
    -webkit-box-shadow:0 3px 8px rgba(0, 0, 0, .20);
    z-index: 0;
}

#notifications:before {
    content: '';
    display:block;
    width:0;
    height:0;
    color:transparent;
    border:10px solid #CCC;
    border-color:transparent transparent #FFF;
    margin-top:-20px;
    margin-left:268px;
}

h3 {
    display:block;
    color:#333;
    background:#FFF;
    font-weight:bold;
    font-size:13px;
    padding:8px;
    margin:0;
    border-bottom:solid 1px rgba(100, 100, 100, .30);
}

如何将弹出窗口更改为响应模式？

谢谢!

Answer 1

尝试在 css 上使用 width:100% 和 max-width:330px。正如我所说，无论视口(viewport)宽度如何，都将始终尊重使用硬编码宽度。

我用 max-width:600px 制作了一个示例。

Pen