手机端 等比例自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>设计图为 360 / * 比例</title>
<script src="./jQuery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
body,
html {
padding: 0;
margin: 0;
}
#outer {
position: absolute;
left: 0px;
overflow: hidden;
transform-origin: left top;
z-index: 999;
}
</style>
</head>
<body style="background-color: #000;">
<div id="outer">
<div style="color:#fff;font-size:20px;width:360px;">
<div style='padding:10px;'>
这是阿斯蒂芬阿斯顿发
<div style="margin-left:20px;">asdf asdf</div>
<div style="margin-left:40px;">asdf asdf</div>
<div style="margin-left:60px;">asdf asdf</div>
<div style="margin-left:80px;">asdf asdf</div>
<div style="margin-left:100px;">asdf asdf</div>
<div style="margin-left:120px;">asdf asdf</div>
<div style="margin-left:140px;">asdf asdf</div>
<div style="margin-left:160px;">asdf asdf</div>
<div style="margin-left:180px;">asdf asdf</div>
<div style="margin-left:200px;">asdf asdf</div>
<div style="margin-left:220px;">asdf asdf</div>
<div style="margin-left:240px;">asdf asdf</div>
<div style="margin-left:240px;">asdf asdf</div>
<div style="margin-left:220px;">asdf asdf</div>
<div style="margin-left:200px;">asdf asdf</div>
<div style="margin-left:180px;">asdf asdf</div>
<div style="margin-left:160px;">asdf asdf</div>
<div style="margin-left:140px;">asdf asdf</div>
<div style="margin-left:120px;">asdf asdf</div>
<div style="margin-left:100px;">asdf asdf</div>
<div style="margin-left:80px;">asdf asdf</div>
<div style="margin-left:60px;">asdf asdf</div>
<div style="margin-left:40px;">asdf asdf</div>
<div style="margin-left:20px;">asdf asdf</div>
这是阿斯蒂芬阿斯顿发
</div>
</div>
</div>
<script type="text/javascript">
var changeResize = function() {
const screenWidth = window.screen.width;
const screenHeight = window.screen.height;
$("#outer").css({
'transform': 'scale(' + (screenWidth / 360) + ')',
})
}
changeResize();
window.onresize = function() {
changeResize();
}
</script>
*********************************************************
//比例是 375 / 724 的蓝湖导出代码 宽高固定
<script type="text/javascript">
var changeResize = function() {
const screenWidth = window.screen.width;
const screenHeight = window.screen.height;
const bili = 375 / 724;
if (screenWidth / screenHeight > bili)
$("#outer").css({
'transform': ' scale(' + (screenWidth / 375) + ')',
})
else
$("#outer").css({
'top': ((screenHeight - screenWidth * 724 / 375) / 2) + 'px',
'transform': 'scale(' + (screenWidth / 375) + ')',
})
}
changeResize();
window.onresize = function() {
changeResize();
}
</script>
*********************************************************
</body>
</html>
