Question

我正在尝试响应弹出式表单，但未成功。任何帮助将不胜感激！

那是着陆页网址-Yogavoga.com/2weekdiet


.modal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  left: 0;
  top: 0;
  max-width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rga(0,0,0);
  background-color: rgba(0,0,0,0.85); 
      padding-top: 65px;

}


.modal-content {
  margin: 5px auto; 
  width: 95%; 
  background-color: #fefefe;
  border: 1px solid #888;border-width:3px;

}

我也想使其对移动设备也能响应。尝试过但无法获得正确的结果。

Answer 1

您必须使用媒体查询来使您的网站具有响应性。

以下是针对不同设备尺寸的媒体查询列表：

 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

现在，您必须在上述媒体查询之一中编写特定于设备的CSS。就像：

@media only screen and (min-width: 600px) {
  .modal {
          //add Mobile specific css for responsive design.
  }
}

如何使此表单对移动设备具有响应性？

1 个答案: