大佬们， 我问一下移动端还原设计稿问题。

Question

如果我移动端设计稿是 750px的 , 用rem 怎么还原页面？我是用js动态给 html标签设置的font-size比如说这个 input 的 windth 我该给多少 rem? 中间是怎么换算的？谢谢大佬了!

Answer 1

(function (doc, win) {

    var docEl = doc.documentElement,

        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

        recalc = function () {

            var clientWidth = docEl.clientWidth;

            if (!clientWidth) return;

            if (clientWidth >= 640) {

                docEl.style.fontSize = '100px';

            } else {

                docEl.style.fontSize = 100 * (clientWidth / 1080) + 'px';

            }

        };

    if (!doc.addEventListener) return;

    win.addEventListener(resizeEvt, recalc, false);

    doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

引入以上代码 把1080改为你设计稿的宽度 以后1rem=100px

如：你的input是400px 你就写4rem