移动端 代码适配各种版本的方法

1.rem 根据根目录的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 = 100 * (clientWidth / 640) + 'px';
            };

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

 

2.css 布局处理   项目例子

列表布局——百分比布局

左右结构——固定一端,另一端自适应

这种方法较为原始,并且字体大小不发控制

3.CSS3 

在以上的基础上 使用VH或者VW单位,一屏幕宽度或高度为单位,设置大小

100vh等于屏幕高度 100vw等于屏幕宽度

4.更改mate

之前要求仿照易企秀,看他们是已320布局，

让根据不同的屏幕宽度改变initial-scale,来达到自适应的效果,感觉也不错,不过没有在深入了解,可能有坑

转载于:https://www.cnblogs.com/tutu-binbin/p/8661895.html