当前位置：文江博客话题详情

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

发布于 2024-10-31 00:44:19 字数 137 浏览 1 评论 0原文

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

CSS？ jquery？ html %（在 Chrome 中效果不佳）

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

静若繁花 2024-11-07 00:44:19

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

演示：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);    
    }

});

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

Here I created a jQuery script to adjust the font-size and img width. This triggers on page load and on window resize based on a percentage of the width of the browser.

Demo: 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);    
    }

});

You can get more complex with the math on the image resizing based on your needs however this is the basic idea.

回复收藏 0 原文

风尘浪孓 2024-11-07 00:44:19

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

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

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

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

You can attach almost any event to something like:

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

But if you wanted to make something that was more adaptable you'd have to evaluate the width x height of html element, from that you can derive a reasonable size for the fonts.

There is really no way to generalize it any further, you'd have to write a function on a case by case basis for the elements you'd want to resize.

回复收藏 0 原文