当前位置:Gxlcms > html代码 > wap手机端页面根据dpr和宽度计算出font-size对应数值_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:36人阅读

最近在进行公司的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 < 320) {

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、测试工具:

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

人气教程排行