所以我正在为一个朋友设计一个系统，这个朋友的游戏战队在线玩侠盗猎车手5。但我遇到了一个问题。在尝试创建“驾驶执照”系统时，当我试图调整窗口大小时，没有任何展示位置保留在div内或正确的区域中。基本上，它们不会与父DIV一起扩展。
我对此并不熟悉，谷歌真的没有做太多帮助，因为这似乎是一个相当具体的要求。在寻求帮助之前，我试图完成这项工作的时间比我要承认的要长得多。
.title {
font-size: 10pt;
font-family: 'Orbitron', sans-serif;
}
.license_preview {
background: url('https://cad.warptimegaming.com/assets/img/svg/licensebg.svg');
background-size: contain;
height: 450px;
width: 100%;
background-repeat: no-repeat;
font-family: 'Orbitron', sans-serif;
display: inline-block;
position: relative;
}
.license_preview .licensenumber {
padding-top: 45px;
padding-left: 25px;
font-family: 'Orbitron', sans-serif;
float: left;
display: inline-block;
position: absolute;
width: 600px;
}
.license_preview .photo {
padding-top: 80px;
padding-left: 30px;
font-family: 'Orbitron', sans-serif;
clear: all;
float: left;
display: inline-block;
position: absolute;
}
.license_preview .dob {
padding-top: 345px;
padding-left: 30px;
font-family: 'Orbitron', sans-serif;
clear: both;
float: left;
display: inline-block;
position: absolute;
width: 600px;
}
.license_preview .expiry {
padding-top: 375px;
padding-left: 30px;
font-family: 'Orbitron', sans-serif;
clear: both;
float: left;
display: inline-block;
position: absolute;
width: 600px;
}
.license_preview .righthand {
background-repeat: no-repeat;
font-family: 'Orbitron', sans-serif;
display: inline-block;
padding-top: 100px;
padding-left: 200px;
font-size: 15pt;
position: absolute;
width: 800px;
}
.license_preview .righthand .name {
padding-top: 10px;
padding-left: 30px;
font-family: 'Orbitron', sans-serif;
clear: both;
width: 300px;
float: left;
display: inline-block;
position: absolute;
}
.license_preview .righthand .address {
padding-top: 60px;
padding-left: 30px;
font-family: 'Orbitron', sans-serif;
clear: both;
float: left;
display: inline-block;
position: absolute;
width: 500px;
}
.license_preview .righthand .details {
padding-top: 190px;
padding-left: 30px;
font-family: 'Orbitron', sans-serif;
clear: both;
float: left;
font-size: 10pt;
display: inline-block;
position: absolute;
width: 600px;
}
.license_preview .righthand .details span {
padding-right: 8px;
clear: both;
float: right width: 600px;
}
.license_preview .righthand .details strong {
padding-right: 8px;
clear: both;
float: right width: 600px;
}
.license_preview span,
.license_preview .righthand span {
font-family: 'Open Sans', sans-serif;
position: absolute;
}
.signature {
font-family: 'Homemade Apple', cursive;
font-size: 16pt;
padding-top: 335px;
float: right;
padding-left: 240px;
position: absolute;
z-index: 99;
}<div class="license_preview">
<div class="licensenumber"><strong class="title">License Number</strong> <span>123-45-6789</span></div>
<div class="photo"><span><img src="https://cad.warptimegaming.com/assets/img/misty.png"></span></div>
<div class="dob"><strong class="title">DOB: </strong><span>01/16/1985</span></div>
<div class="expiry"><strong class="title">Expires: </strong><span>01/16/2019</span></div>
<div class="righthand">
<div class="name"><strong class="title">Name: </strong><br><span>Marishiah Q. Vezorile</span></div>
<div class="address"><strong class="title">Address: </strong><br><span>123 Fake Street,<br>Vinewood, LS </span></div>
<div class="details">
<strong class="title">Eyes: </strong> <span>Brown</span>
<strong class="title">Height: </strong> <span>6'3</span>
<strong class="title">Sex: </strong> <span>M</span>
<strong class="title">Class: </strong> <span>D</span><br>
<strong class="title">Donor: </strong> <span>N</span>
<strong class="title">CLR: </strong> <span>N</span>
</div>
</div>
<div class="signature" style="padding-top:-10px;">
<span class="title">Signature:</span><br> Marishiah Q. Vezorile
</div>
</div>
</div>
以下是此项目jsFiddle的链接：
www.jsfiddle.net/bradjtrammell/jg7favfr/
非常感谢任何帮助。
干杯
答案 0 :(得分：0)
您可以使用css缩放系数，但在小屏幕中调整文本大小不是标准而非响应式设计。
示例jquery css zoom：
$(document).ready(function(){
$("body").css({"zoom":$(window).width()/1000});
})
答案 1 :(得分：0)
步骤1.基础知识
使用CSS3扩展许可证，如下所示：
.license_preview {
transform: scale(.5);
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
-ms-transform: scale(.5);
-o-transform: scale(.5);
}
请参阅：http://jsfiddle.net/r0ct28a7/
第2步。一些改进
通过添加以下内容将变换原点设置到左上角可能是明智的：
.license_preview {
...
-ms-transform-origin: 0% 0%; /* IE 9 */
-webkit-transform-origin: 0% 0%; /* Chrome, Safari, Opera */
transform-origin: 0% 0%;
}
定义许可预览div的宽度和高度也是明智之举，如下所示：
.license_preview {
...
width: 730px; /* this was 100% */
height: 450px;
}
第3步。最后一步
你可以让jQuery对比例因子进行数学计算，因此它会在调整大小时更新，如下所示：
$(window).resize(function(){
var scalefactor = ($(window).width()/780);
if(scalefactor>1) scalefactor=1;
$(".license_preview").css('transform','scale('+scalefactor+')');
$(".license_preview").css('-webkit-transform','scale('+scalefactor+')');
$(".license_preview").css('-moz-transform','scale('+scalefactor+')');
$(".license_preview").css('-ms-transform','scale('+scalefactor+')');
$(".license_preview").css('-o-transform','scale('+scalefactor+')');
})
以下是一个工作示例（完全响应）：https://codepen.io/anon/pen/jGvKLg
PS。值780来自元素的原始宽度加上页面的一些填充。
答案 2 :(得分：0)
您可以尝试使用em或rem代替px来调整大小，这会调整元素相对于屏幕大小的大小，因为它使用了浏览器的默认字体大小
以下是使用em的一些注意事项： https://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
至于要使用的值，可能需要一些试验和错误，但使用em应该有助于在调整大小时保留div，即使屏幕大小发生变化