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"