如果页面只需要在移动端显示的话,直接写 JS 控制一些固定的 size 可行不可行?

2016-02-02 11:37:35 +08:00
 Lpl

感觉这样写代码比较乱,代码如下:

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.

不知道这样写代码好不好,只需要在移动端显示

1853 次点击
所在节点    前端开发
2 条回复
thatk
2016-02-02 16:44:18 +08:00
why not css
Lpl
2016-02-02 21:14:26 +08:00
@thatk 因为不需要适配 pc 端,用 css3 的 media 控制要写好几个样式。感觉这样子能够简单暴力一点

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/254978

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX