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

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属性控制允许用户放大或缩小页面的方式。

您可能想在此处阅读有关Viewport元标记的更多信息。