HTML5学堂-码匠 HTML5学堂

您当前位于:移动端基础 ——> 移动端开发知识[系列] - 处理rem的小数点问题 flexible.js

移动端开发知识[系列] - 处理rem的小数点问题 flexible.js

2015/05/09 17:24:00 | 作者:HTML5学堂(码匠) | 分类:移动端基础 | 关键词:移动端,相对单位,rem

移动端H5知识[系列] - 处理rem小数点 flexible.js

HTML5学堂:在移动端中,我们常常因为自适应而烦恼,用百分百当然可以,但是高度呢?显然是有问题的,那么字体在不同手机显示的比例呢?显然是有问题的。因此会用到H5的单位rem,但是有时候会出现小数点的rem,本文提到是引用flexible.js解决小数点问题,希望本文能帮助大家!谢谢!

本文来自梦幻雪冰

在开发手机端页面的时候,使用了rem单位,实现上比%、em等其他的做法更简单了,它可以实现高度和宽度等比例变化。好东西是好,但是不好的一点是rem的小数点。比如下图的情况。

欢迎沟通交流~HTML5学堂

如何进行处理?保证字体大小在有效的小位数之内。

先来理解一个数学问题,如何保证一个数除以另外一个数能被除尽。思考一下,偶数除以2的倍数,结果会是多少?结果肯定是可以被除尽。所以我只要保证被除数是偶数,除数是2的倍数。

现在引入手机淘宝也使用的一个框架点击下载 访问密码 59e8

使用方法:

解析代码:

先来看看,下面的例子,获取的页面宽度是多少?

模拟器的iPhone4下的结果:

模拟器的iPhone6 Plus下的结果:

欢迎沟通交流~HTML5学堂

为什么会是两倍关系?

注意观察,meta中initial-scale=0.5缩放,意思是对页面进行缩小的缩放。首先我们先来讨论一下缩放的问题,缩放值越大,当前viewport的宽度就会越小,反之亦然。例如在iphone中,ideal viewport的宽度是320px,如果我们设置 initial-scale=2 ,此时viewport的宽度会变为只有160px了,这也好理解,放大了一倍嘛,就是原来1px的东西变成2px了,但是1px变为2px并不是把原来的320px变为640px了,而是在实际宽度不变的情况下,1px变得跟原来的2px的长度一样了,所以放大2倍后原来需要320px才能填满的宽度现在只需要160px就做到了。因此,我们可以得出一个公式:

移动设备可用布局宽度 = 浏览器的视口宽度(设备屏幕大小)/ 缩放值;

因为缩放值是0.5,所以移动设备可用布局宽度的是浏览器的视口宽度2倍。然后这个可用布局宽度除以2的倍数就可以保证被除数可以被除尽了。

效果如下:

陈能堡:2015年08月27日开发手记 —— 关于meta,我们讲到,该框架会自动添加进去,但是今日发现如果在页面中不先写meta的话,安卓手机下的border、阴影解析出现问题,会变粗。因此,最好还是手动添加进去。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端