最近在进行公司的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、测试工具：
使用谷歌自带开发者中心的手机模拟测试
