说一下rem 与 em 有什么区别
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就能达到所有元素的动静适配了
挪动端-以一个固定尺寸(750px)为规范-将 px 转化为 rem
(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,而后再做转化
100px = 1rem;750px = 7.5rem;将这段js代码命名为一个mobile-adaption.js引入到页面中,就能够欢快的应用了,将px转化为rem,实现自适应布局
在不同的设施当中保持一致,每个公司对于挪动端都有本人的一套规范,也有用淘宝flexible.js做适配的
应用可参考手淘适配
- 手把手教你用vuepress搭建网站
- Js面试-口试真题-请说一下Js中的事件循环机制