我想在我的Web应用程序中创建一个消息警报框。我创建了主要样式,但在小屏幕尺寸上遇到了问题。
这是常规1366x768计算机屏幕的图像:
这是典型的移动设备:
问题:
X按钮已标记消息。
当邮件从包装器出来时,主邮件包装器已经修复,并且没有展开。
如何解决以上两个问题?我必须走另一条路吗?我使用position: fixed;
属性值将消息保持在最前面。
这是我的HTMl和CSS代码:
HTML:
<div class="top-msg">
<div class="top-msg-ico">
!
</div>
<div class="top-msg-inner">
<p>Only letters and nubers are allowed for email. See <a href="#">security</a> for more info.</p>
</div>
<div class="top-msg-close" style=" cursor: pointer;">✕</div>
</div>
CSS:
.top-msg {
width: 100%;
height: 55px;
position: fixed;
background-color: rgba(42,45,50,0.6);
color: rgba(250,251,255,0.95);
font-family: "Lato", sans-serif;
font-size: 18px;
}
.top-msg-close {
float: right;
padding-top: 17px;
padding-right: 30px;
//border: 1px solid white;
//height: 100%;
width: 3%;
}
.top-msg-inner {
top: 15px;
position: absolute;
display: inline-block;
padding-left: 10px;
width: 80%;
//border: 1px solid white;
}
.top-msg-ico {
min-width: 65px;
height: 100%;
background-color: #fff;
display: inline-block;
background-color: rgba(0,0,0,0.7);
text-align: center;
font-size: 45px;
}
小提琴:
https://jsfiddle.net/4oLvyajo/
更新-解决方案!-
在LGSon答案的帮助下,我设法完成了所有设计,因此我接受了他的答案,但下面的小提琴是空洞的解决方案。
小提琴:
https://jsfiddle.net/4oLvyajo/4/
图片:
最佳答案
这是您的起点
.top-msg {
width: 100%;
position: fixed;
background-color: rgba(42,45,50,0.6);
color: rgba(250,251,255,0.95);
font-family: "Lato", sans-serif;
font-size: 18px;
}
.top-msg-close {
float: left;
box-sizing: border-box;
padding-top: 17px;
padding-right: 30px;
width: 45px;
}
.top-msg-inner a {
text-decoration: none;
color: RGBA(0, 0, 0, 0.6);
font-weight: bold;
}
.top-msg-inner a:hover {
color: RGBA(0, 0, 0, 0.5);
}
.top-msg-inner {
float: left;
box-sizing: border-box;
padding: 0 10px;
width: calc(100% - 110px);
}
.top-msg-ico {
float: left;
width: 65px;
height: 57px;
background-color: #fff;
background-color: rgba(0,0,0,0.7);
text-align: center;
font-size: 45px;
}
<div class="top-msg">
<div class="top-msg-ico">
!
</div>
<div class="top-msg-inner">
<p>Only letters and nubers are allowed for email. See <a href="#">security</a> for more info.</p>
</div>
<div class="top-msg-close" style="cursor: pointer;">✕</div>
</div>