Vue：PC端全局响应式布局

最新推荐文章于 2025-05-27 17:03:00 发布

原创最新推荐文章于 2025-05-27 17:03:00 发布 · 2.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#PC端全局响应式布局

js 同时被 2 个专栏收录

25 篇文章

订阅专栏

css

11 篇文章

订阅专栏

博客介绍了PC端全局响应式布局，可根据分辨率720到1080或窗口尺寸进行。提到两种方法，css3的room对px有效、对rem无效，resize事件触发速率高，MDN推荐三种resize方法；css3的scale可整体放大缩小；还可使用js计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.youkuaiyun.com/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';