//需要给设置scale属性的盒子添加css
transform-origin: 0 0;
// 缩放
(function() {
var ww = window.innerWidth;
var wh = window.innerHeight;
let scaleX = ww / 750;
if (scaleX < 1) {
$('#scaleContainer, .flex-box')
.css('transform', 'scale(' + scaleX + ')')
.show();
$('.pop_qs').css({
transform: 'scale(' + scaleX + ') translate(-50%, -50%)',
height: wh / scaleX - 400
});
$('.pop_qs_suspect').css({
transform: 'scale(' + scaleX + ') translate(-50%, -50%)'
});
$('.button, .placeNavMove').css({
transform: 'scale(' + scaleX + ')'
});
} else {
$('#scaleContainer, .flex-box').show();
$('.button, .placeNavMove').css({
'margin-left': (ww - 750) / 2
});
}
let scalexPop = (wh * (ww / 472)) / 590;
if (Math.floor(scalexPop) <= 0) {
$('.previw-area, .previw').css('transform', `scale(${scalexPop})`);
}
})();
// resize
(function() {
window.addEventListener('resize', resizeThrottler, false);
let resizeTimeout;
function resizeThrottler() {
// ignore resize events as long as an actualResizeHandler execution is in the queue
if (!resizeTimeout) {
resizeTimeout = setTimeout(function() {
resizeTimeout = null;
actualResizeHandler();
// The actualResizeHandler will execute at a rate of 15fps
}, 66);
}
}
function actualResizeHandler() {
// handle the resize event
var ww = window.innerWidth;
var wh = window.innerHeight;
var scaleX = ww / 750;
if (scaleX < 1) {
$('#scaleContainer')
.css('transform', 'scale(' + scaleX + ')')
.show();
$('.button, .placeNavMove, .flex-box').css({
transform: 'scale(' + scaleX + ')'
});
$('.pop_qs').css({
transform: 'scale(' + scaleX + ') translate(-50%, -50%)',
height: wh / scaleX - 400
});
$('.pop_qs_suspect').css({
transform: 'scale(' + scaleX + ') translate(-50%, -50%)'
});
} else {
$('#scaleContainer').show();
$('.button, .placeNavMove, .flex-box').css({
'margin-left': (ww - 750) / 2
});
}
let scalexPop = (wh * (ww / 472)) / 600;
if (Math.floor(scalexPop) <= 0) {
$('.previw-area, .previw').css('transform', `scale(${scalexPop})`);
}
}
})();
利用transform:scale属性完成移动端适配
最新推荐文章于 2024-06-25 11:57:05 发布