嗞嗞嗞~ 你的浏览器仿佛在对我微笑!

YDUI Touch Docs 返回首页

Rem 自适应类 ydui.flexible.js

1、注意!!!

1、文字较多,看前请喝水;

2、rem是什么?

2.1、rem (font size of the root element) 是相对根元素<html>的字体大小变化而变化的css单位,实现强大的屏幕适配布局是它的优势;

所以不同屏幕大小的终端,它的根元素<html>的字体大小是需要相应变化的,一般有JS控制或者media query控制两种方式;

本文不考虑media query方式,因为Android太多分辨率了,嗯~ 不说了...

2.2、既然 rem 是一个css单位,编写样式的时肯定得将设计图中的px转为rem,怎么转换取决于你的脚本怎么控制,于是有了本文;

3、需要解决的问题

3.1、如何根据不同大小的屏幕修改根元素<html>的字体大小?

3.2、写样式时,如何将设计MM给的图轻松转换为css需要的rem?

4、解决方案

4.1、ydui.flexible.js 是处理移动端 rem 自适应(可伸缩布局方案)的类库,无须第三方工具(如Sass/Less方法、Gulp、Sublime插件),轻松口算设计稿对应rem值;

4.2、ydui.flexible.js 源码:

/**
* YDUI 可伸缩布局方案
* rem计算方式:设计图尺寸px / 100 = 实际rem 例: 100px = 1rem
*/
!function (window) {

/* 设计图文档宽度 */
var docWidth = 750;

var doc = window.document,
docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

var recalc = (function refreshRem () {
var clientWidth = docEl.getBoundingClientRect().width;

/* 8.55:小于320px不再缩小,11.2:大于420px不再放大 */
docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px';

return refreshRem;
})();

/* 添加倍屏标识,安卓为1 */
docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1);

if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
/* 添加IOS标识 */
doc.documentElement.classList.add('ios');
/* IOS8以上给html添加hairline样式,以便特殊处理 */
if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8)
doc.documentElement.classList.add('hairline');
}

if (!doc.addEventListener) return;
window.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);

}(window);

5、啰嗦几句

5.1、ydui.flexible.js 简单粗暴,建议对需要响应页面大小的任何元素都使用 rem 作为单位来定义 (除第六点注明的一些CSS属性外);

啊啊啊,那字体字号不是会出现13、15px啦?那不是很奇葩?立马掏出我的测试JJ看看,嗯~还是非常美好的!

5.2、对于倍图,争议较多,因为如果要做到对应倍图的话,意味着图片都需要做三份,成本太高了,所以只取2倍图;

实在是非常低成本还原的方案,未尝不可;

当然也提供了data-dpr标识;

5.3、写死viewport,采用scale=1.0,IOS和安卓一视同仁;

实际使用时,百度地图或者第三方地图也是不支持高清方案的;

处理1像素边框采用transform: scale(0.5);方式缩小,IOS8及以上直接使用0.5px边框;

5.4、图标方面,单色图标尽量使用字体图标;多色图标使用单张图片,不使用雪碧图 (也没发现淘宝触屏版哪里用了雪碧图^_^);

5.5、对于大于320px且小于420px宽度的设备进行等比缩放,其他宽度的设备不做缩放处理

若未设置页面最大宽和最小宽,字体过大或过小会导致页面丑陋,比如在pad或PC上,但实际手机尺寸也不会过大或过小;

6、使用方法

6.1、在所有资源前加载ydui.flexible.js

6.2、把视觉稿中的px转换成rem;

rem计算方式:设计图尺寸px / 100 = 实际rem 例: 100px = 1rem,32px = 0.32rem;

6.3、无论设计图什么尺寸,算法一致。但需修改ydui.flexible.jsdocWidth变量为设计图宽度;默认设计图文档宽度为750px;

7、一些不使用rem的CSS属性

7.1、包括但不限于:border-widthborder-radiusbox-shadowtransformbackground-size

8、与淘宝lib-flexible的区别

8.1、计算方面,淘宝把视觉稿分成100份来看待,为了以后兼容vh,vw单位,但是计算相对麻烦;

例如:设计图文档宽度为750px,按钮高度为80px,对应rem则为 80 / 75 ≈ 1.0666666667rem,不借助第三方工具的话,计算还是有一定难度;

8.2、处理字号方面,淘宝不推荐用rem作为字号单位,配合用data-dpr属性来区分不同dpr下的字体大小,但手写这些差异肯定不现实,得依赖第三方工具;

来自淘宝lib-flexible:“针对OS 9_3的UA,做临时处理,强制dpr为1,即scale也为1,虽然牺牲了这些版本上的高清方案,但是也只能这么处理了”;

8.3、采用动态修改viewport中scale的值达到缩放效果,但在PC上浏览就会出现轻度模糊;

你有病啊?不是移动端开发么?但个人调试代码还是在PC上,强迫症患者难受啊!

9、总结

9.1、编写样式时,只需将设计MM给的图中各元素 px 除以 100得到rem写进你的样式文件里即可;

前提需保证ydui.flexible.js中docWidth变量与设计图宽度一致;

9.2、以上纯属个人观点,如有错误,欢迎指正。Date:2016/03/05

10、参与讨论

10.1、有任何使用问题,请在评论中留言,也欢迎大家发表意见、建议。感谢您对YDUI的支持。