前一阶段拜读了阿里团队的flexible.js,但是flexible的封装感觉还是不完美，因为flexible还是要依赖less/sass之类的编译执行，所以就存了一些问题，我把这些问题进行整理。
优点：
1.代码量明显减少
2.开发效率变高，css管理式开发，css逻辑清晰
3.less+flexible.js能否适配各种手机型号，实现各个尺寸屏幕的兼容
4.less学习成本低（几乎为零）
缺点：
1.less编译成css执行，团队开发git版本控制器的坑，这个不多说了
2.因为是less编译，所以不好后期维护，虽然节省了开发成本，但是很有可能这些节省的开发成本在后期debug的时候增加成本预算
3.如果用css线上，合并肯定又坑，因为你并不知道less是如何取解析编译成css文件的
4.一般项目线上less和gulp编译执行，但是less编译还是需要时间有可能渲染不出来css（几率比较小）
综合上面优缺点，只要合理的规范的使用less，利是远远的大于弊的！尤其是flexible，节省了适配各个型号手机的时间，大大的增加了开发效率！
今天突发奇想，我们flexible.js其实用到的只是less的对rem的计算，那么我们可不可以自己重构这套框架来让它不依赖less，用css来执行flexible.js呢？
;(function(win, lib) {
var doc = win.document;
var docEl = doc.documentElement;
var metaEl = doc.querySelector('meta[name="viewport"]');
var flexibleEl = doc.querySelector('meta[name="flexible"]');
var dpr = ;
var scale = ;
var tid;
var flexible = lib.flexible || (lib.flexible = {});
if (metaEl) {
console.warn('将根据已有的meta标签来设置缩放比例');
var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
if (match) {
scale = parseFloat(match[]);
dpr = parseInt( / scale);
}
} else if (flexibleEl) {
var content = flexibleEl.getAttribute('content');
if (content) {
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
if (initialDpr) {
dpr = parseFloat(initialDpr[]);
scale = parseFloat(( / dpr).toFixed());
}
if (maximumDpr) {
dpr = parseFloat(maximumDpr[]);
scale = parseFloat(( / dpr).toFixed());
}
}
}
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
if (devicePixelRatio >= && (!dpr || dpr >= )) {
dpr = ;
} else if (devicePixelRatio >= && (!dpr || dpr >= )){
dpr = ;
} else {
dpr = ;
}
} else {
// 其他设备下，仍旧使用1倍的方案
dpr = ;
}
scale = / dpr;
}
docEl.setAttribute('data-dpr', dpr);
if (!metaEl) {
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
}
function zoom(rem, width){
var rate = rem/;//0.625
var inRate = /rem;//
var oFlexContainer = document.getElementById('flexContainer');
oFlexContainer.style.webkitTransform = 'scale('+rate+')';
var height = oFlexContainer.offsetHeight;
oFlexContainer.style.width = width*inRate+'px';
oFlexContainer.style.marginLeft = -(-rate)/*(width*inRate) + 'px';
oFlexContainer.style.marginTop = -(-rate)/*height + 'px';
console.log(height)
console.log(width*inRate)
}
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
var height = document.getElementById('flexContainer').getBoundingClientRect().height;
if (width / dpr > ) {
width = * dpr;
}
var rem = width / ;
console.log(width)
if(rem < ){
zoom(rem, width, height)
}
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, );
}, false);
win.addEventListener('pageshow', function(e) {
// if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, );
// }
}, false);
if (doc.readyState === 'complete') {
doc.body.style.fontSize = * dpr + 'px';
} else {
doc.addEventListener('DOMContentLoaded', function(e) {
doc.body.style.fontSize = * dpr + 'px';
}, false);
}
refreshRem();
flexible.dpr = win.dpr = dpr;
flexible.refreshRem = refreshRem;
flexible.rem2px = function(d) {
var val = parseFloat(d) * this.rem;
if (typeof d === 'string' && d.match(/rem$/)) {
val += 'px';
}
return val;
}
flexible.px2rem = function(d) {
var val = parseFloat(d) / this.rem;
if (typeof d === 'string' && d.match(/px$/)) {
val += 'rem';
}
return val;
}
})(window, window['lib'] || (window['lib'] = {}));
上面是我今天做的一个小demo，如果你想要200px的一个元素，手淘样式是这样实现200rem／75，我的思路是能不能让它把定义的75改写成1，之后我们200rem自适应的还是200px，这样我们就可以脱离less，直接编译css了。
但是我们最大的问题就是一点，chrome浏览器支持的font-size最小为12px，也就是说如果你用10px浏览器会自动给你转化为12px（有点小坑，据说是因为12px以下的字太小了，为了避免bug设置了最小12px。。。），如何才能改写font-size让它可以小于12px呢？
-webkit-text-size-adjust:none;
font-size:10px;
但是我试了一下，新版的chrome取消了这个方法，也就是说，新版的无效，老版的chrome可能有效...excuse? ? ?难道让我们检测告诉你，你的浏览器版本太新，请降级。。。
然后我想起了某个css3属性
transform:scale(0.875);
然后我又脑洞大开，可不可能先给他元素拉到无限大（因为rem＝font-size,200rem你自己算吧），然后再用这个transfrom属性按照比例缩小呢？，之后缩小的左边距和上边距拉回！！！
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
var height = document.getElementById('flexContainer').getBoundingClientRect().height;
if (width / dpr > ) {
width = * dpr;
}
var rem = width / ;
console.log(width)
if(rem < ){
zoom(rem, width, height)
}
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
函数运行时候，我们取到了flexContainer的id（一个定义的div作为类似body的容器）的height，之后我们运行zoom函数
function zoom(rem, width){
var rate = rem/;//0.625
var inRate = /rem;//
var oFlexContainer = document.getElementById('flexContainer');
oFlexContainer.style.webkitTransform = 'scale('+rate+')';
var height = oFlexContainer.offsetHeight;
oFlexContainer.style.width = width*inRate+'px';
oFlexContainer.style.marginLeft = -(-rate)/*(width*inRate) + 'px';
oFlexContainer.style.marginTop = -(-rate)/*height + 'px';
console.log(height)
console.log(width*inRate)
}
我们取到rate（正比）和inRate（反比）来做一个比率的运算，上面代码就是动态的设置flexContainer（自己定义的div容器）的状态，我们的思路是吧所有要写的元素都写进flexContainer,之后我们动态的改变flexContainer就可以实现想要的效果了，我们这里的flexContainer可以理解成body，为什么不用body呢，因为body最好还是不要动了，我们的元素都被无限放大了，body元素改动可能会影响你的整体布局！
之后我们改写了这段代码：
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, );
}
}, false);
我们把上面的代码改成：
win.addEventListener('pageshow', function(e) {
// if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, );
// }
}, false);
这样子我们每次刷新都会获取新的值，不用判断了，不然页面会算不出我们想要的flexContainer的height，我们必须得到height才能够获取到我们应该定义的margin－top，公式是这样子的：
-(-rate)/*height
注意因为我们是反向拉伸的，所以是负值，这个原理和居中的元素（margin负方法）有点像。
最后来说一下font-size的问题！
因为我们的元素最后被放大了rate倍（rate为0.0几的小数），所以我们最后的font-size是一个比较恶心的数，就拿750举例子，我们大多数用的都是750的美工ui图，750的时候我们的rate为0.0833333，所以我们的1px大小相当于原来的0.0833333，也就是说100px大概8.3333像素大小，实际像素为4.16。
这个也是现存的问题也就是说我们的font-size的定义必须要根据这个比率来算，但是个人认为font-size出现的几率和width，height是没有可比性的，只要我们合理的规划好font-size那么这个问题也是基本上可以忽略的！