极客观点
项目管理
HarmonyOS
我想让这个div弹窗电脑手机端都适合因该怎么 改啊 ，现在电脑端太宽了，而且关闭和咨询按钮我想要等比例缩放位置不变，正常点击
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
#container {
overflow: hidden;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
#background_video {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
height: 100%; width: 100%;
}
#video_cover {
position: absolute;
width: 100%; height: 100%;
background: url('video_cover.jpeg') no-repeat;
background-size: cover;
background-position: center;
}
#video_controls {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
z-index: 99999;
}
#play img {
width: 100px;
}
#pause img {
width: 90px;
}
#pause {
display: none;
}
@media (min-width: 768px) {
#video_controls {
display: none;
}
}
/* Demo page specific styles */
body {
text-align: center;
font-family: 'proxima-nova', Helvetica;
background: #F6F5F1;
}
#container {
height: 100%;
}
#overlay {
position: absolute;
top: 0; right: 0; left: 0; bottom: 0;
background: rgba(0,0,0,0.5);
}
#main_content {
z-index: 2;
position: relative;
display: inline-block;
/* Vertical center */
top: 50%;
/* transform: translateY(-50%); */
}
#main_content h1 {
text-transform: uppercase;
font-weight: 600;
font-family: 'proxima-nova-condensed', Helvetica;
color: #fff;
font-size: 35px;
}
#main_content .sub_head {
color: rgba(255,255,255,0.5);
font-size: 18px;
}
#main_content .info {
color: rgba(255,255,255,0.5);
font-size: 12px;
margin-top: 10px;
}
#links {
margin-top: 50px;
}
#links a {
border: 2px solid rgba(255,255,255,0.20);
border-radius: 61px;
font-size: 12px;
color: #FFFFFF;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
padding: 10px 25px;
display: inline-block;
margin-right: 15px;
}
#footer {
position: absolute;
bottom: 0; left: 0; right: 0;
}
#footer a {
color: rgba(255,255,255,0.5);
text-decoration: none;
margin: 10px;
font-size: 12px;
}
#footer a:first-child {
float: left;
}
#footer a:last-child {
float: right;
}
</style>
</head>
<body>
<div id="k_s_ol_miniWinSm" class="ks_ol_comm_div"></div>
<div id="k_s_ol_chatWinSm" class="ks_ol_comm_div"></div>
<div id="k_s_ol_chatWin" class="ks_ol_comm_div"></div>
<div id="k_s_ol_inviteWin" class="ks_ol_comm_div" style="display: block; width: 90%; z-index: 2147483647; left: 0; top: 50%; margin-top: -198px; border-radius: 15px 15px; margin-left: 5%; position: fixed !important; visibility: visible;box-shadow: 0 0 20px #000;">
<div id="k_s_ol_inviteWin_fl">
<div id="divbg" style="width: 100%; border-radius: 15px 15px; height: 397px; position: relative; background: url(http://m.jjfukang.com/zt/hhb/images/tc.gif) no-repeat;background-size:100% 100%;" name="背景图片" action="frame">
<div id="div39" style="left: 660px; top: 1px; width: 30px; height: 30px; position: absolute; cursor: pointer; line-height: 0px;" name="关闭按钮" orig_x="678" orig_y="1" orig_index="" ></div>
<div id="div2" style="left: 396px; top: 321px; width: 160px; height: 37px; position: absolute; cursor: pointer; line-height: 0px;" name="按键二" orig_x="217" orig_y="316" orig_index=""></div>
<div id="div1" style="left: 138px; top: 326px; width: 160px; height: 37px; position: absolute; cursor: pointer; line-height: 0px;" name="按键一"></div>
</div>
</div>
</div>
</body>
</html>
html5
你都写media了，那就一个屏幕一个屏幕适配呗。
等比缩放位置不变可以媒体查询里写
transform：scale()，然后transform-origin设在元素中心位置就行了