2019第11周知识总结

再次复习 dpr rem布局

https://www.cnblogs.com/well-nice/p/5509589.html

移动端布局 与 dpr 实际无关

具体步骤以下

设计稿子通常按照 ip6切图 ， 首先看 是按照设备尺寸去切的 375667 仍是按照实际像素去切的 750 1234

将下面的代码中的 375 改为 375 或者 乘以二 就能够了。

(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 / 375) + 'px';
        };
    if (!doc.addEventListener) return;
    var pageRem = function () {
        {
            var e = document.documentElement.clientWidth;
            window.innerHeight
        }
        320 >= e && (e = 320), e >= 750 && (e = 750);
        console.log(e)
        var n = e / 375 * 100 ;
        document.documentElement.style.fontSize = n + "px"
    };
    pageRem()
    window.addEventListener("resize", pageRem);
    win.addEventListener(resizeEvt, recalc, false);
    win.addEventListener("resize", pageRem);
    doc.addEventListener('DOMContentLoaded', recalc, false);
    console.log('屏幕dpr:', devicePixelRatio)
})(document, window);

browsersync 临时 本地写文件 最简单的 watch文件方式
http://www.browsersync.cn/

browser-sync start --server --files "*.html"