移动版自适应解决方法

方法一

第一步：设置初始rem

css file:

html{
    font-size: calc(100vw/7.5);
}

说明：

如果设计稿基于iphone6，横向分辨率为750，body的width为750 / 100 = 7.5rem
如果设计稿基于iphone4/5，横向分辨率为640，body的width为640 / 100 = 6.4rem

100vw是设备的宽度，除以7.5可以让1rem的大小在iPhone6下等于100px。

第二步：全局px替换为rem

替换html中的px为rem，注意rem=px/100，即font-size: 12px，需要写成font-size: .12rem，其他宽度、高度、间距等同理。由于rem是相对于根节点元素大小的单位，遂当设备宽度改变时，采用rem布局的大小均会跟随相同比例变化，从而实现整体缩放。

方法二

使用js实现，参考网易移动版

// JavaScript Document
(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=750){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                }
            };

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

下面总结下网易的这种做法：

• • 先拿设计稿竖着的横向分辨率除以100得到body元素的宽度

  

  • 播放器高度为210px，写样式的时候css应该这么写：height: 2.1rem。之所以取一个100作为参照，就是为了这里计算rem的方便！