时间戳

首页 > 解决方案 > 从移动设备打开时如何调整弹出窗口大小

css - 从移动设备打开时如何调整弹出窗口大小

问题描述

我正在尝试使用显示屏幕时加载的弹出窗口。它在桌面上运行良好，但从移动设备打开时，弹出窗口的大小没有调整大小。从手机上看，整个弹出窗口都没有显示出来。我正在为您提供我使用的 CSS 属性。

您能否通过让我知道如何调整窗口大小以适应移动设备来提供帮助。

#ac-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .7);
    z-index: 1001;
}
#popup {
    width: 555px;
    height: 375px;
    background: #9152f8;
    border: 5px solid #000;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    box-shadow: #64686e 0px 0px 3px 3px;
    -moz-box-shadow: #64686e 0px 0px 3px 3px;
    -webkit-box-shadow: #64686e 0px 0px 3px 3px;
    position: relative;
    top: 150px;
    left: 375px;
}

如何放置将调整大小并适合设备屏幕的值？

根据回复在文档头中添加了这个和视口，但现在弹出窗口根本不会加载。

           @media only screen and (max-width: 600px) {
       #ac-wrapper {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(255, 255, 255, .7);
                z-index: 1001;
            }

       #popup {
             width: 555px;
                height: 375px;
                background: #9152f8;
                border: 5px solid #000;
                border-radius: 25px;
                -moz-border-radius: 25px;
                -webkit-border-radius: 25px;
                box-shadow: #64686e 0px 0px 3px 3px;
                -moz-box-shadow: #64686e 0px 0px 3px 3px;
                -webkit-box-shadow: #64686e 0px 0px 3px 3px;
                position: relative;
                top: 150px;
                left: 375px; 
        }
  }

标签： css

解决方案

您可以实现此目的的一种方法是使用viewport units，而不是硬编码您的widthandheight属性。例如：

#popup {
    width: 50vw;
    height: 30vh;
}

您可能会考虑的另一件事是将媒体查询添加到您的 css 代码中。

#ac-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, .7);
  z-index: 1001;
}
#popup {
  width: 555px;
  height: 375px;
  background: #9152f8;
  border: 5px solid #000;
  border-radius: 25px;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  box-shadow: #64686e 0px 0px 3px 3px;
  -moz-box-shadow: #64686e 0px 0px 3px 3px;
  -webkit-box-shadow: #64686e 0px 0px 3px 3px;
  position: relative;
  top: 150px;
  left: 375px;
}
@media only screen and (max-width: 600px) {
  #popup {
      width: 400px;
      height: 250px;
   }
}

为了获得最佳用户体验，使用媒体查询可能是明智之举，因为这将为您提供更多控制权。

推荐阅读