Div最小化浏览器窗口时隐藏

Question

我们根据Container Div对齐了“Call to Action Box”div。它在正常的浏览器视图中正确对齐但问题是当我们最小化浏览器窗口时“使用行动”div对用户不可见。

<div class="container">
<div class="PosRel">
            <div class="PosAbsol">
                <div  class="MsgContainer">
                            <div class="MsgDisplay">Call To Action</div>
                </div>
            </div>
        </div>
</div>

CSS：

.container {
    width: 100%;
    margin: 0 auto;
    vertical-align: top;
    text-align: center;
    font-size: 0;
    position: relative;
}

.PosRel {
    position: relative;
}

.PosAbsol {
    position: absolute;
    right: 0;
}

.MsgContainer {
    position: fixed;
    z-index: 9999;
    opacity: 0;
    transform: translateZ(0px);
    transition: all 2s linear;
}

.MsgDisplay {
    margin: 0px;
    width: 200px;
    height: 58px;
    background-size: 100% 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: rgb(241, 241, 241);
    text-decoration: none;
    word-wrap: break-word;
    z-index: 9999;
    padding: 18px 15px;
    font-weight: 600;
    position: absolute;
    right: 10px;
}

Answer 1

你想要这个吗？）

@media only screen and (max-width:1230px) and (min-width:990px){ 
 // CSS code
 }
@media only screen and (min-width: 480px) and (max-width: 767px) {
// CSS code
}
@media only screen and (max-width: 479px) {
// CSS code
}