html - CSS 中的顶级消息框

Question

我想在我的网络应用程序中制作一个消息提醒框。我创建了主要样式，但在小屏幕尺寸上遇到问题。

这是常规 1366x768 计算机屏幕的图像:

这是一个典型的移动设备:

问题:

1. X 按钮已标记消息。
2. 主消息包装器已修复，当消息从包装器中出来时不会展开。

如何解决以上两个问题？我必须走另一条路吗？我使用 position: fixed; property-value 来保持我的信息在最前面。

这是我的 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;">&#10005;</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;
}

fiddle : https://jsfiddle.net/4oLvyajo/

更新-解决方案!-

在 LGSon 的一些帮助之后answer 我设法完成了所有的设计，所以我接受了他的答案，但是洞的解决方案在下面的 fiddle 中。

fiddle : https://jsfiddle.net/4oLvyajo/4/

图片:

Answer 1

这是你的开始

.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;">&#10005;</div>    
</div>