Question

我正在为改善自己而设立一个前端练习，我遇到了一个非常头疼的问题。

我正在尝试让我的模态响应移动设备和平板电脑。作为wordpress插件的一部分，我正在创建一个练习see link here。

但到目前为止，我认为我很接近。

但我的主要问题是CSS。我已经对我尝试的一些事情和选项留下了评论。

#overlay:backdrop {
  /*
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  */
}
#overlay {
  visibility: hidden;
  /*
  position: absolute;
  left: 0px;
  top: 0px;
  */
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 10000;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 30%;
  top: 30%;
  /*
  -webkit-transform: translate(-27%, -10%);
  transform: translate(-27%, -10%);
  */
  text-align: center;
}
#overlay div#gfb_newsletter_signup_form {
  max-width: 750px;
  min-width: 250px;
  max-height: 750px;
  min-height: 250px;
  margin: 5px auto;
  background-color: #fff;
  border: 1px solid #000;
  padding: 20px;
  text-align: center;
  position: absolute;
}
a.boxclose {
  float: right;
  position: absolute;
  top: -10px;
  right: -10px;
  cursor: pointer;
  color: #fff;
  border: 1px solid #AEAEAE;
  border-radius: 30px;
  background: #605F61;
  font-size: 17px;
  display: inline-block;
  line-height: 0px;
  /*
  padding: 11px 7px 17px 7px;
  */
  padding: 11px 8px 15px;
}
.boxclose:before {
  content: "x";
}
.gfb_ebook_img {
  display: block;
  clear: both;
  position: relative;
  /*
  top: -20px;
  left: -30px;
  */
}
#gfb_newsletter_signup_form h1 {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  display: block;
  font-size: 30px;
  font-weight: bold;
  color: #333;
  padding: 0px 10px;
  text-align: center;
  /*style="margin-bottom:20px; font-size:18px;"*/
}
div#p-footer {
  padding: 15px;
  display: block !important;
  position: relative;
}

Answer 1

对于使用固定像素宽度进行模态的响应式设计，你不会走得太远。

例如，您的叠加层包含：

#overlay div#gfb_newsletter_signup_form {
    max-width: 750px;
    .
    .
    .
}

在屏幕宽度小于750像素的平板电脑或手机上，它将离开视口。

你应该使用百分比 - 在你的小提琴中我将上面的行改为

 max-width:40%;

它适合jsfiddle窗口。

更好的是，你可以学习Media Queries并做出正确的响应式设计

Answer 2

使用@media screen css query在不同的屏幕宽度上定义您的模型。此查询使用宽度为％或em的类。但所有宽度为px的类和id都应在@media query

中定义

 @media screen and (max-width: screenwithinPx) {
      //define your class and id here having with and height in px
    .class{} 
           #Ids{}
        }

Answer 3

您可以尝试将叠加层更改为绝对定位（这样您就可以拥有内部div的坐标）。然后设置top，left，right，bottom都等于0，并设置自动边距。假设您的尺寸为百分比，这将使框在任何屏幕上居中。然后对#gfb_newsletter_signup_form执行相同操作，但为其添加一些高度，可能是在最小值和最大值内有意义的百分比。

所以你的#overlay和#gfb_newsletter_signup_form看起来像这样：

#overlay {
  visibility: hidden;

  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;

  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 10000;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  text-align: center;
}


#overlay div#gfb_newsletter_signup_form {
  max-width: 750px;
  min-width: 250px;
  max-height: 750px;
  min-height: 250px;

  height: 30%;

  margin: 5px auto;
  background-color: #fff;
  border: 1px solid #000;
  padding: 20px;
  text-align: center;
  position: absolute;
}

这是一个更新的小提琴https://jsfiddle.net/kzy2a6p7/16/

制作模态响应

3 个答案: