六、PC端全局响应式布局

根据分辨率720到1080或者根据窗口尺寸
两个方法room和transform：scale(x,y)

1、css3的room

对px有效，对rem无效
由于resize事件可以以较高的速率触发, 因此事件处理程序不应该执行计算开销很大的操作
MDN推荐三种resize方法

window.onload = function(){
   document.body.style.zoom="normal";//避免zoom尺寸叠加
   let scale=document.body.clientWidth/1904;
   document.body.style.zoom=scale;
}

;(function() {
    var throttle = function(type, name, obj) {
        obj = obj || window;
        var running = false;
        var func = function() {
            if (running) { return; }
            running = true;
             requestAnimationFrame(function() {
                obj.dispatchEvent(new CustomEvent(name));
                running = false;
            });
        };
        obj.addEventListener(type, func);
    };

    /* init - you can init any event */
    throttle("resize", "optimizedResize");
})();
window.addEventListener("optimizedResize", function() {
  document.body.style.zoom="normal";
  let scale=document.body.clientWidth/1904;
  document.body.style.zoom=scale;
});

2、css3的scale

整体放大缩小，像图片一样

transform-origin:0 0;//缩放原点
var a=document.body.clientWidth/1920;
document.body.style.transform=`scale(${a},${a})`//ES6模板字符串语法

一些高度和宽度的意义
https://blog.csdn.net/u010874036/article/details/50953044

3、用js计算

    let proportion = width / 1920;
    $light.style.height = Math.round(618 * proportion) + 'px';
    $light.style.marginLeft = Math.round(65 * proportion) + 'px';
    $light.style.marginTop = Math.round(-30 * proportion) + 'px';
    $light.style.width = Math.round(1365 * proportion) + 'px';