Javascript 如何在页面加载之前调整布局

我有一个jquery代码，它根据主div的宽度调整文本和图像的大小，主div延伸100%的浏览器窗口。由于某种原因，当我将代码放入（document.ready）函数时，它不会启动。它可以在（窗口）中完美地工作。调整大小，但是每当页面第一次加载时，它看起来非常糟糕。一旦你把网络浏览器变小或变大，一切都会井然有序。加载页面时，如何使所有内容都对齐

$(document).ready(function() {
    var mainwidth = $('.main').width();
    var mainheight = $('.main').height(mainwidth * .8895);
    var headerwidth = $('.header-middle').width();
    var headerheight = $('.header-middle').height();

    $('.call-us-today').css({'font-size': headerwidth * .01836});
    $('.header-paragraph').css({'font-size': headerwidth * .01734});
    $('.header-paragraph-footer').css({'font-size': headerwidth * .01632});
    $('.top-text').css({'font-size': headerwidth * .02448});
    $('.graybar-text').css({'font-size': headerwidth * .03265});
    $('.body-header').css({'font-size': headerwidth * .02245});
    $('.body-text').css({'font-size': headerwidth * .01632});
    $('.footer').css({'font-size': headerwidth * .01224});
    $('.banner-text').css({'font-size': headerwidth * .02244});

    $('.graybar-text').css({'letter-spacing': headerwidth * .00408});
});

更新

$(document).ready(function(){
    resizeDiv();
});

window.onresize = function(event) {
    resizeDiv();
}

function resizeDiv() {
    var mainwidth = $('.main').width();
    var mainheight = $('.main').height(mainwidth * .8895);
    var headerwidth = $('.header-middle').width();
    $('.main').height(mainwidth * .8895)
    $('.logo').width(headerwidth * .049);
    $('.logo').height(headerheight * .7533);
    $('.divider').width(headerwidth * .00204);
    $('.design-image').width(headerwidth * .2547);

    $('.call-us-today').css({'font-size': headerwidth * .01836});
    $('.header-paragraph').css({'font-size': headerwidth * .01734});
    $('.header-paragraph-footer').css({'font-size': headerwidth * .01632});
    $('.top-text').css({'font-size': headerwidth * .02448});
    $('.graybar-text').css({'font-size': headerwidth * .03265});
    $('.body-header').css({'font-size': headerwidth * .02245});
    $('.body-text').css({'font-size': headerwidth * .01632});
    $('.footer').css({'font-size': headerwidth * .01224});
    $('.banner-text').css({'font-size': headerwidth * .02244});

    $('.graybar-text').css({'letter-spacing': headerwidth * .00408});
}

$（document）.ready（）

在所有资源（如图像）完成下载之前激发。请尝试以下方法：

$(window).load(function() {
// image manipulation code

});

---

你在哪里调整功能？一点HTML也可以。与其根据主div的宽度，为什么不使用viewPort？只需在

.trigger（'resize'）上进行链接即可

在resize处理程序上？我是否会在document ready函数中添加一个触发器？我已经尝试了几次，但不幸的是没有成功。您可以先通过window.resize处理程序，然后再通过window.load处理程序，看看是否有任何差异？另外，您是否考虑过CSS媒体查询？他们是一个很好的解决方案，可以根据浏览器的分辨率提供不同风格的服务。如果使用viewport，您不需要创建多个大小的css文件吗？我已经有5个不同的浏览器。我不想为每个浏览器多做3到4个样式表。您是否仔细检查了两个事件处理程序，看看它们有什么不同？Re：媒体查询，您不需要创建额外的CSS文件，只需声明希望以不同分辨率应用的样式块。我认为它比摆弄javascript更优雅。以下是一个很好的教程：