感觉这样写代码比较乱,代码如下:
var screenWidth;
var scale;
function adapterJS(){
//以 iphone 6 的 375 宽度为调试基础
var debugWidth = 375;
screenWidth = $(".global_header").width();
scale = screenWidth / debugWidth;
if(scale == 1){
return;
}
$(".index_new_logo").css("height", reset(2.5));
$(".index_new_logo a").css("font-size", reset(1.1));
$(".login_register").css({"padding-top":reset(0.4), "padding-left": reset(0.4)});
$(".logo").css({"width":reset(7.45), "height":reset(1.65), "margin-top":reset(0.3)});
$(".padding-top").css({"padding-top":reset(0.4), "padding-right":reset(0.4)});
$(".section_two").css({"margin-bottom": reset(10.5)});
$(".section_two .customer_title").css({"background-size":reset(19), "margin-top":reset(2), "height":reset(1), "margin-bottom":reset(3.5)});
$(".customer .customer_one").css({"height":reset(5)});
$(".customer .customer_two").css({"height":reset(5)});
$(".customer .customer_three").css({"height":reset(5)});
$(".section_four .section_title").css({"margin-top":reset(2), "margin-bottom":reset(1.5)});
$(".section_four .section_btn").css({"margin-bottom":reset(1)});
$(".section_five .section_title img").css({"margin-top":reset(2), "margin-bottom":reset(1)});
$(".section_five .section_detail").css({"padding-bottom": reset(1)});
$(".section_five .section_detail .item").css({"padding-top": reset(2)});
$(".section_six").css("padding-bottom", reset(1.5));
$(".section_six .section_title img").css("margin-top", reset(3));
$(".section_six .section_info").css("margin-top", reset(2));
$(".section_seven").css("margin-bottom", reset(2.8));
$(".global_header .header_inner_wrap .user_opera_wrap .user_opera").css("font-size", reset(1));
}
function reset(divSize){
return scale * divSize + "rem";
}
$(function(){
adapterJS();
})
我导航的宽度是 100%,所以使用了:
screenWidth = $(".global_header").width();
来判断宽度。
其次是,移动端页面我的宽度尽量是按照百分比来的,但是有一些地方写百分比不太合适,所以就把值成固定的了。然后根据当前屏幕大小与浏览器屏幕大小的比例,等比缩放这些固定的 size.
不知道这样写代码好不好,只需要在移动端显示。
1
thatk 2016-02-02 16:44:18 +08:00
why not css
|