
感觉这样写代码比较乱,代码如下:
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 |