Question

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

CSS？ jQuery的？ html％（在chrome中效果不佳）

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

Answer 1

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

$(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);    
    }

});

根据您的需要调整图像数学可能会更加复杂，但这是基本的想法。

Answer 2

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

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

但是如果你想做一些更具适应性的东西，你必须评估width x height html元素，从中可以得到合理的大小。字体。

实际上没有办法进一步概括它，你必须根据你想要调整大小的元素逐个编写一个函数。

Answer 3

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

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

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

原始文章是由 A List Apart 撰写的（粉碎在这里和那里添加了一些内容）：http://www.alistapart.com/articles/responsive-web-design/

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

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

3 个答案: