网页前端设计

一、概述：

做了几年的移动端一直用rem，感觉最烦琐的就是rem的计算。随便可以用cssrem自动计算，但是有时候感觉宽度跟高度的rem并不是完全准确。所以决定用viewport缩放来试试看效果，经果一些网友的帮忙测试，发现缩放viewport这种方法更简单、高效、准确。

测试结果：（如果其它手机测试结果欢迎留言）测试地址：http://86y.org/demo/scale/
360n6pro 正常
oppo r7s 正常
坚果Pro 正常
iphone6 正常
iphone8p 正常
华为p9 正常

二、思路：

例如效果图是：750*1334(px)的源文件。

1、根据750 PSD源图 宽度尺寸进行比例缩放，高度并没有限止，所以高度是自由的

2、缩放viewport的同时，宽度跟高度是等比的，所以敢说这种方式比rem更准确。

三、js核心代码：

代码说明：切图时只需要按照PSD尺寸大小设置px即可，无需复杂的rem计算

(function (doc, win) {
            var maxwidth = 750;//PSD源图 宽度尺寸
            var oMeta = document.getElementById('viewport');
            var docE1 = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    oMeta.content = "width=device-width,initial-scale=1.0,user-scalable=no";
                    var clientWidth = docE1.clientWidth;
                    var sca = (clientWidth / maxwidth);
                    sca = sca > 1 ? 1 : sca;
                    oMeta.content = "width=" + maxwidth + ",minimum-scale=" + sca + ",maximum-scale=" + sca + ",user-scalable=no,minimal-ui";
                };
            var orientchange = function () { 
                setTimeout(function () {
                    if (window.orientation == 180 || window.orientation == 0 || window.orientation == 90 || window.orientation == -90) {
                        recalc();
                    }
                }, 200);
            };

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener("DOMContentLoaded", recalc, false);
            doc.addEventListener(resizeEvt, orientchange, false);//横竖屏切换执行
        })(document, window);

四、结语：

对于移动端自适应这个话题，有很多种方法，但是我觉得最好用的应该还是缩放viewport。希望能帮助到大家！

如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)