文档章节

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

卖小女孩的小火柴
 卖小女孩的小火柴
发布于 2015/01/29 19:12
字数 538
阅读 8752
收藏 11

最近在进行公司的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、测试工具:

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


© 著作权归作者所有

卖小女孩的小火柴
粉丝 46
博文 68
码字总数 28535
作品 1
成都
项目经理
私信 提问
使用Flexible实现手淘H5页面的终端适配

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页...

问题达人
2016/03/29
70
0
移动web适配利器-rem

分类目录 Alloy 实验室 (42) Web开发 (486) 团队 (30) 移动开发 (25) 资源工具 (49) 最新文章 TAT.joeyguo发表在《使用 gka 一键生成帧动画》 TAT.joeyguo发表在《使用 gka 加速 createjs 动...

sd19871122
2017/12/17
0
0
移动web开发适配方案之Rem

移动端为什么要做适配 移动端相对PC端来说大部分浏览器内核都是基于Webkit的,所以大部分都支持CSS3的最新语法。但是由于手机的屏幕尺寸和分辨率都不太一样(尤其是安卓),所以不得不对不同...

西风瘦码
2018/07/25
0
0
使用Flexible实现手淘H5页面的终端适配--大漠

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页...

拉普拉斯婷
2016/12/15
125
0
PC前端转移动前端的二三事——移动端适配

一、首先要搞明白移动端适配问题,就要先搞明白像素和视口 像素包含2种像素:物理像素和css像素 物理像素又称设备像素,任何设备的物理像素的数量是固定不变的,单位是pt。所谓的一倍屏、二倍...

Wendy曹
2018/07/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

队列-顺序(c/c++实现)

队列是在线性表功能稍作一改形成的,在生活中排队是不能插队的吧,先排队先得到对待,慢来得排在最后面,这样来就形成了”先进先出“的队列。 队列(顺序)实现的三个步骤: 定义所需的功能(...

白客C
17分钟前
5
0
安装tomcat部署网站/nginx代理tomcat/tomcat部署多个网站

来源:https://blog.csdn.net/Powerful_Fy 安装jdk: Oracle官方下载 https://www.oracle.com/technetwork/java/javase/downloads/index.html yum安装openjdk: 1.查找可使用的jdk包: [roo......

asnfuy
25分钟前
3
0
Linux 安装 Android studio

官网下载linux 版本 android xxxxx-xxxx.tar.gz 然后 找到它 解压缩 得到 android-studio文件夹 执行 [root@monkey java]# mv ./android-studio /opt [root@monkey java]# cd /opt/android-s......

MrLins
28分钟前
5
0
VMware vSphere虚拟机的迁移

VMware vSphere 6.7下,虚拟机的迁移按照移动的内容,可以分为4种: 1)冷迁移(cold migration) 2)热迁移(vMotion) 3)存储热迁移(storage vMotion) 4)完全热迁移(shared-nothing ...

大别阿郎
28分钟前
4
0
SpringCloud——Docker部署eureka集群

Docker部署eureka集群 一、环境准备 1.docker环境 centos7下的安装:https://www.jianshu.com/p/ec02810d6a2b docker常用命令:https://www.jianshu.com/p/af7977b1075c 没有用过docker的最好......

devils_os
28分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部