如何在窗口调整大小时自动调整字体和图像（完整网站）的大小？答案

【问题标题】：How do i automatically resize Fonts and Images (complete Website) on window-resize?如何在窗口调整大小时自动调整字体和图像（完整网站）的大小？
【发布时间】：2025-11-24 17:45:02
【问题描述】：

如何在窗口调整大小时自动调整字体和图像（完整网站）的大小？人们将有不同的屏幕分辨率。

CSS? jQuery？ html %（在 chrome 中效果不佳）

我需要制作幻灯片（演示，幻灯片是用ckeditor制作的）

【问题讨论】：

您能使用像280 Slides这样的在线工具吗？
@Marcel：这个网站令人印象深刻，感谢您的链接。

标签： jquery html css resize

【解决方案1】：

在这里，我创建了一个 jQuery 脚本来调整字体大小和 img 宽度。这会在页面加载和基于浏览器宽度百分比的窗口调整大小时触发。

演示：http://jsfiddle.net/Crndp/4/

$(document).ready(function() {

    fontSize();
    imgSize();

    $(window).resize(function() {
        fontSize();
        imgSize();
    });

    function fontSize() {
        $ww = $(window).width();
        $fontSize = ($ww / 25) + 'pt';
        $('body').css("font-size", $fontSize);
    }

    function imgSize() {
        $ww = $(window).width();
        $imgSize = ($ww / 5) + 'px';
        $('body img').css("width", $imgSize);    
    }

});

您可以根据自己的需要调整图像大小的数学运算变得更复杂，但这是基本思想。

【讨论】：

【解决方案2】：

您几乎可以将任何事件附加到以下内容：

$(window).resize(function() {
  $('h1').css("fontSize", "32px");
});

但是，如果您想制作更具适应性的东西，则必须评估 width 的 width x height 元素，从中您可以得出合理的字体大小。

真的没有办法进一步概括它，你必须根据具体情况为要调整大小的元素编写一个函数。

【讨论】：

【解决方案3】：

我认为您会发现这篇关于响应式网页设计的文章非常有帮助：

http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

它介绍了如何利用灵活的图像以及如何实现媒体查询（以及其他有用的东西）。

原文章是A List Apart写的（smashing在这里和那里添加了一些东西）：http://www.alistapart.com/articles/responsive-web-design/

这是响应式演示的完成的 HTML：http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html

【讨论】：