wap手机端页面根据dpr和宽度计算出font-size对应数值_html/css_WEB-ITnose

最近在进行公司的wap端首页改版和添加活动页面，为了做的效果更好一些，就参考淘宝和京东的wap版，然后对淘宝的wap做了一些分析，淘宝的wap触屏版做的自适应和兼容性很不错，于是整理了下。

wap手机端页面根据dpr和宽度计算出font-size对应数值表如下：

dpr	最小宽度320px	最大宽度540px	系数
1	20px	33.75px	0.0625
2	40px	67.5px	0.125
3	60px	101.25px	0.1875

备注：

1、是按照倍数关系增加的

2、手机淘宝就是按照这种方式计算的m.taobao.com

3、因为我PHPer，不是专业的前端，如果有错，请指导下，谢谢。

附件：

1、js代码计算方式：

//通过手机屏幕dpr和手机宽度来确定font-size的值

function autorun() {

    //初始值

    var default_width = 20;

    var default_dpr = 1;

    var dpr = window.devicePixelRatio;

    var width = screen.width;

    var html_style = '';

    var body_style = '';

 

    //dpr倍数

    var difference = dpr / default_dpr;

 

    //计算

    if (difference === 1 || difference === 2 || difference === 3) {

        var default_min_size = 20 * difference;

        var default_max_size = 33.75 * difference;

        var default_coefficient = 0.0625 * difference;

        html_style = get_font_size(width, default_min_size, default_max_size, default_coefficient);

        body_style = 'font-size:' + difference * 12 + 'px';

    } else {

        html_style = get_font_size(width, 20, 33.75, 0.0625);

        body_style = 'font-size:12px';

    }

 

    //进行dom操作

    $("html").attr('style', html_style);

    $("body").attr('style', body_style);

}

 

/**

 * 通过手机屏幕dpr和手机宽度来确定font-size的值

 * @param {int} width

 * @param {int} default_min_size

 * @param {int} default_max_size

 * @param {int} default_coefficient

 * @returns {String}

 */

function get_font_size(width, default_min_size, default_max_size, default_coefficient) {

    var style = '';

    //屏幕宽度需要在320-540之间进行计算

    if (width 

        style = 'font-size:' + default_min_size + 'px';

    } else if (width > 540) {

        style = 'font-size:' + default_max_size + 'px';

    } else {

        var difference = width - 320;

        var fontsize = default_min_size + difference * default_coefficient;

        style = 'font-size:' + fontsize + 'px';

    }

    return style;

}

2、参考文章：

http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

3、参考JS函数：

var dpr = window.devicePixelRatio;    //获取手机屏幕dpr

var width = screen.width;            //获取手机屏幕宽度

4、测试工具：

使用谷歌自带开发者中心的手机模拟测试