根据分辨率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';
