前端 rem和px的转换？

Question

写h5的页面的时候 设计图是750的，那么里面的px应该怎么进行转换？
我自己在Hbuilder里面设置的比例是 1:75 但是感觉设计出来的比较小，这事为啥？

谢谢！

Answer 1

既然已知UI稿宽度为750 那么750宽度的设备的px应该与UI稿一致。

方案1 设置根节点字体大小。
为html[根节点]增加 css定义当前根节点字体大小为 font-size: calc(100vw / 750); 这样在750宽度设备上1rem对于的就是1px。在350宽度上 0.5px。

方案2 引入pxtorem库
相对于方案1的优点是会对使用第三方使用px的控件库进行处理

注意：在电脑上模拟的时候 chrome font-size最小不得低于12px。所以可能在某些字体较小的场景和真机显示效果会有所不同。

至于hbuild部分的问题 应该是说Px与rem的比例吧。就拿我上面方案1的效果 1px:1rem
一般情况下工程会设定为 100px:1rem 也就是为根节点字体大小为 font-size: calc(100vw / 7.5)，这样0.12rem = 12px。应该只是配置错误，建议参考官方文档。

Answer 2

感觉设计出来的比较小

也就是说真实页面比设计稿的大？

那有可能是 css px to rem 的工具转换得和设置根元素 fontsize 的工具单位没有匹配正确

---

建议去了解一下 rem 布局的原理

Answer 3

750是基于iPhone6的屏幕设计的，不管在浏览器还是在hbuilder里都要设置好模拟器的设备是iPhone6
rem这个单位我已经很久没用过了，因为感觉不是很好用，还不如单纯用px＋media query设置几个断点

Answer 4

var whenReady = (function() { 
    var funcs = [];
    var ready = false; 

    function handler(e) {
        if (ready) return; 

        if (e.type === 'onreadystatechange' && document.readyState !== 'complete') {
            return;
        }
        for (var i = 0; i < funcs.length; i++) {
            funcs[i].call(document);
        }
        ready = true;
        funcs = null;
    }
    if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', handler, false);
        document.addEventListener('readystatechange', handler, false); //IE9+
        window.addEventListener('load', handler, false);
    } else if (document.attachEvent) {
        document.attachEvent('onreadystatechange', handler);
        window.attachEvent('onload', handler);
    }
    return function whenReady(fn) {
        if (ready) {
            fn.call(document);
        } else {
            funcs.push(fn);
        }
    }
})();

function setResize() {
    var doc = document,
        win = window;
    var docEl = doc.documentElement,
        con = doc.getElementById("container"),
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = con.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            document.body.style.visibility = "visible"
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
}

whenReady(setResize);