【web】强大的屏幕适配布局rem响应式 实现一套web代码多端自适应适配

强大的屏幕适配布局rem响应式 实现一套web代码多端自适应适配

实现强大的屏幕适配布局

   流式的布局、固定的宽度，还有响应式来做，但是这些方案都不是最佳的解决方法。->->rem

rem是什么？

    rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

--动态计算方案: 通过网页的缩放动态更改网页DOM的fontSize值

// 动态计算屏幕的宽度，从而得到网页的fontSize大小
(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 10 * (clientWidth / 320) + 'px';