rem
是基于 html
元素的字体大小来决定,而 em
则根据使用它的元素的大小决定,一般被称为相对长度单位,是根据它父元素的字体大小来计算的,一般默认情况下:16px = 1em
如果父元素font-size:16px
,子元素margin:0.8em
。那么得到的大小就是:0.8 * 16 =12.8
。
当所有单位都采用em
时,我们只需要改变body
的font-size
,那么其他子元素宽度就能动态变化了,显然方便很多
em
和 rem
单位之间的区别是浏览器根据谁来转化成 px
值
rem
是css3
新增的一个相对长度单位,它的出现是为了解决em
的缺点,em
可以说是相对于父级元素的字体大小,当父级元素字体大小改变时,又得重新计算。
rem出现就可以解决这样的问题,rem
只相对于根目录,即HTML元素
。有了rem
这个单位,我们只需要调整根元素html
的font-size
就能达到所有元素的动态适配了
(function(win, lib) {
var doc = win.document;
var docEl = doc.documentElement;
var devicePixelRatio = win.devicePixelRatio;
var dpr = 1;
var scale = 1;
// 设置vierPort
function setViewport() {
dpr = 1;
win.devicePixelRatioValue = dpr;
scale = 1 / dpr;
var 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);
}
}
setViewport();
var newBase = 100; // 把页面划分为100等分
// 设置Rem
function setRem() {
var visualView = Math.min(
docEl.getBoundingClientRect().width,
lib.maxWidth
);
newBase = (100 * visualView) / lib.desinWidth;
docEl.style.fontSize = newBase + 'px';
}
var tid;
lib.desinWidth = 640;
lib.baseFont = 18;
lib.maxWidth = 540;
lib.init = function() {
win.addEventListener(
'resize',
function() {
clearTimeout(tid);
tid = setTimeout(setRem, 300);
},
false
);
win.addEventListener(
'pageshow',
function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(setRem, 300);
}
},
false
);
if (doc.readyState === 'complete') {
doc.body.style.fontSize = lib.baseFont * dpr + 'px';
} else {
doc.addEventListener(
'DOMContentLoaded',
function(e) {
doc.body.style.fontSize = lib.baseFont * dpr + 'px';
},
false
);
}
setRem();
docEl.setAttribute('data-dpr', dpr);
};
})(window, window['adaptive'] || (window['adaptive'] = {}));
window['adaptive'].desinWidth = 750;
window['adaptive'].baseFont = 12;
window['adaptive'].maxWidth = 540;
window['adaptive'].init();
以上代码以设计稿 750px
的为标准,如果是非 750px
,在实际页面中,将它转化为 750
,然后再做转化,根据rem,将一个页面平均分成多少个等分,做移动端适配
100px = 1rem;
750px = 7.5rem;
将这段js代码命名为一个mobile-adaption.js
引入到页面中,就可以愉快的使用了,将px
转化为rem
,实现自适应布局
在不同的设备当中保持一致
每个公司都有自己的一套标准,有的也用手淘那一方案.遵循自己公司开发规范即可.