V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Lpl
V2EX  ›  前端开发

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

  •  
  •   Lpl ·
    penglongli · 2016-02-02 11:37:35 +08:00 · 1852 次点击
    这是一个创建于 3217 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    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.

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

    2 条回复    2016-02-02 21:14:26 +08:00
    thatk
        1
    thatk  
       2016-02-02 16:44:18 +08:00
    why not css
    Lpl
        2
    Lpl  
    OP
       2016-02-02 21:14:26 +08:00
    @thatk 因为不需要适配 pc 端,用 css3 的 media 控制要写好几个样式。感觉这样子能够简单暴力一点
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2148 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 01:18 · PVG 09:18 · LAX 17:18 · JFK 20:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.