根據(jù)分辨率720到1080或者根據(jù)窗口尺寸
兩個方法room和transform：scale(x,y)
1、css3的room
對px有效，對rem無效
由于resize事件可以以較高的速率觸發(fā), 因此事件處理程序不應(yīng)該執(zhí)行計算開銷很大的操作
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';
