用 js 寫區塊自適應,等比縮放
▼500是可以調整的數值,藍色數字調整不同比例視窗所呈現的區塊長寬
page3ContentResize();
$(window).resize(function() {
page3ContentResize();
});
function page3ContentResize(){//page3Contant區塊自適應
var page3_width = $('.page3').width(),
page3_height = $('.page3').height(),
page3Content_set_newwidth = 0,
page3Content_set_newheight = 0;
if(page3_width<page3_height+500){
// console.log('寬小於高')
page3Content_set_newWidth = page3_width/1.3;
page3Content_set_newHeight = page3_width/3.5;
}else{
// console.log('寬大於高')
page3Content_set_newWidth = page3_height/0.7;
page3Content_set_newHeight = page3_height/2;
}
$('.page3_content').css({'width':page3Content_set_newWidth+'px'});
$('.page3_content').css({'height':page3Content_set_newHeight+'px'});
}
page3ContentResize();
$(window).resize(function() {
page3ContentResize();
});
function page3ContentResize(){//page3Contant區塊自適應
var page3_width = $('.page3').width(),
page3_height = $('.page3').height(),
page3Content_set_newwidth = 0,
page3Content_set_newheight = 0;
if(page3_width<page3_height+500){
// console.log('寬小於高')
page3Content_set_newWidth = page3_width/1.3;
page3Content_set_newHeight = page3_width/3.5;
}else{
// console.log('寬大於高')
page3Content_set_newWidth = page3_height/0.7;
page3Content_set_newHeight = page3_height/2;
}
$('.page3_content').css({'width':page3Content_set_newWidth+'px'});
$('.page3_content').css({'height':page3Content_set_newHeight+'px'});
}
留言
張貼留言