标签:
最近在进行公司的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、测试工具:
使用谷歌自带开发者中心的手机模拟测试
wap手机端页面根据dpr和宽度计算出font-size对应数值
标签:
原文地址:http://my.oschina.net/kenblog/blog/373341