如何使弹出元素适合移动设备？

Question

我正在设计的网站在进入时会显示一个用于年龄验证的弹出窗口。此弹出窗口在桌面浏览器上看起来很棒，但在移动设备上没有响应。目前在手机上它显示的非常大，可能是它通常在桌面上显示的大小。如何使这与移动设备成比例？手机和平板电脑也是。任何帮助都会很棒！

CSS

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
}
html, body{
  font-family: helvetica;
  font-size: 100%;
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-family: Raleway;
  line-height: 1.4;
}

body {
font-size: 100%;
  
  @media (min-width: 32em) {
    font-size: 110%
  }
  @media (min-width: 54em) {
    font-size: 111%
  }
  @media (min-width: 74em) {
    font-size: 115%
  }

  @media (min-width: 96em) {
    font-size: 135%
  }
}
a.btn{
  background-color: #74AA50;
  color: #fff;
  text-decoration: none;
  display:inline-block;
  letter-spacing: 0.1em;
  padding: 0.5em 0em;
  
  &.btn-beta{
    background-color: #dba952;
  }
}
.decor-line {
    position:   relative;
    top:    0.7em;
  border-top: 1px solid #ccc;
  text-align:center;
  max-width: 40%;
  margin: 0.5em auto;
  display: block;
  padding: 0.1em 1em;
  color: #ccc;
  
  span{
    background: transparent;
    color: #ccc;
    position: relative;
    top: -.7em;
    padding: 0.5em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight:    900;
  }
}
.overlay-verify{
  background: rgba(0,0,0,0.75);
  position:fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
}

.box{
 background:url(https://static1.squarespace.com/static/5ef08aa918c34c5e1ee24d37/t/5efa11cff7a1d03adb8ac000/1593446880079/44-IMG_6788+copy.jpg) 50% 50%;
    background-size: cover;
    color: #fff;
    
    img{
      position: relative;
      z-index: 999;
      width: 12em;
    }
  position: fixed;
  left: 0;
  right: 0;
  top: 20%;
  bottom: 0;
  margin: 0 auto;
  z-index: 999;
  width: 1000px;
  height: 525px;
  display:table;
  
  .box-left, .box-right{
    width: 100%;
    height: 525px;
    position: relative;
    text-align: center;
    padding: 5%;
    
    @media (min-width: 54em){
        display:table-cell;
        vertical-align:middle;
        width: 50%;
    }
    
    p{
      //padding: 5%;
      position: relative;
      z-index: 99;
    }
  }
  .box-left{    
    &:after{
      content: '';
      position: absolute;
      z-index: 0;
      top: 0;
      left: 0;
      width: 100%;
     
    }
  }
  
  .box-right{
    text-align: center;
   
    
    h3 {
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      border-bottom: 1px solid #eee;
      padding-bottom: 1em;
      margin: 0 auto;
    }
    p{
      color: #fff;
    }
    small{
      color: #fff;
    }
    .btn{
      font-weight: 600;
      letter-spacing: 0.2em;
      padding: 0.9em 1em 0.7em;
      margin: 1em auto;
      display: block;
    }
  }
}

#agePopUp a {
 background-color: black;
 color: white;
 padding: 10px 20px;
 margin-top: 10px;
 display: inline-block;
}

.box,.overlay-verify{display:none}

标头 JQuery 脚本

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

<script> jQuery(document).ready(function($){
           
 
if (sessionStorage.getItem('advertOnce') !== 'true') {
//Show Box on Start-Up
  $('.box').show();
  $('.overlay-verify').show();
}else{
  $('.box').hide();
  $('.overlay-verify').hide();
}
 
//Enter Button
$('#refresh-page').on('click',function(){
$('.box').hide();
$('.overlay-verify').hide();
sessionStorage.setItem('advertOnce','true');
});

//Exit Button
$('#reset-session').on('click',function(){
$('.box').show();
sessionStorage.setItem('advertOnce','');
});
});
 
</script>

<link href='https://fonts.googleapis.com/css?family=Raleway:600,900,400' rel='stylesheet' type='text/css'>
<main>
  <article class="box">
    <div class="box-left">
      <img src="https://static1.squarespace.com/static/5ef08aa918c34c5e1ee24d37/t/5efc646a19c9962072e60679/1593599082426/SBR_centered+copy+-+white.png">
    </div>
    <div class="box-right">
      <h3>Welcome</h3>
      <p>By clicking enter, I certify that I am over the age of 18.</p>
     
      <a href="#" class="btn btn-alpha"  id="refresh-page">ENTER</a>
     
  <span>OR</span>
     
      <a href="javascript:history.back()" class="btn btn-beta" id="reset-session">EXIT</a>
     
      <small>Always enjoy responsibily.</small>
    </div>
    </div>
  </article>
 
  <div class="overlay-verify"></div>
</main>

Answer 1

您需要设置视口。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

width 属性控制视口的大小，initial-scale 属性控制页面首次加载时的缩放级别，user-scalable 属性控制允许用户放大或缩小页面的方式。

您可能想了解更多关于视口元标记here。