使 div 响应（带有文本的透明黑框）答案

【问题标题】：Make div responsive (transparent black box with text)使 div 响应（带有文本的透明黑框）
【发布时间】：2017-01-14 12:22:02
【问题描述】：

我几乎是一名 CSS 初学者，我需要帮助来制作我为移动设备创建的响应式 div。现在它不会调整大小，您无法阅读文本/从移动设备查看整个框。我在 CSS 编辑器中有这个：

.mod {
    position: relative;
    width: 875px;
    height: 350px;
    padding: 5px;
}

.mod-text,
.mod-background {
    position: absolute;
    left: 15%;
    width: 100%;
}

.mod-text {
    color: #FFF;
    font-size: 1em;
    text-align: center;
    bottom: 0;
}

.mod-background {
    background-color: #000000;
    border-radius: 8px;
    filter: alpha(opacity=60);
    opacity: .6;
    top: 0;
    height: 100%;
}

我将其设置为特定像素的原因是因为我希望该框环绕文本和订阅表单的 sn-p 代码。非常感谢您的帮助！

【问题讨论】：

您是否尝试将<meta name="viewport" content="width=device-width,initial-scale=1"> 添加到文档的开头？只是一个提示，不要使用大的固定像素大小，而是使用em 或百分比。 :)
我可以将最大宽度设置为 75%，但是当我尝试将高度更改为百分比时，它只会使所有内容都显示在一条非常细的线上。
@ifvictr 不，我会尝试的。直接在我正在编辑的页面的 HTML 中还是在自定义 CSS 窗格中？
我无法让该建议发挥作用。每当我更改 CSS 中的高度时，框就会变成一条细线。
文本似乎也没有响应。所以我也可以使用帮助！ :)

标签： html css wordpress responsive

【解决方案1】：

好的，所以我认为主题将我的内容推到了主页的右侧，但这是对我有用的 CSS sn-p：

.container {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 75%;
  height: auto;
  }
.content {
  position: relative;
  color: White;
  padding: 10px;
  z-index: 5;
}
.background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: Black;
  z-index: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: .5;
}
.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

【讨论】：