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

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

css？ jQuery的？ HTML％（没有工作以及在铬）

我需要做幻灯片（presentaion，幻灯片与CKEditor的制造）

来源

2011-04-06 baj

你有可能使用像[280张幻灯片]为了这个目的做出了一个在线工具（http://280slides.com/Editor/）？ – Marcel 2011-04-06 21:40:51

@Marcel：该网站令人印象深刻，感谢您的链接。 – thirtydot 2011-04-13 21:43:34

在这里我创建了一个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);  
    } 

});

您可以用图像上的数学变得越来越复杂尺寸调整根据您的需求但是这是基本的想法。

来源

2011-04-13 15:57:55 wdm

您几乎可以将任意事件附加到类似：

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

但如果你想使一些更适应你必须评估html件width X height，从您可以为字体得出一个合理的规模。

实在是没有办法，以进一步推广它的任何，你必须逐个为你要调整要素上写上情况的功能。

来源

2011-04-06 21:26:29

我想你会发现这篇文章自适应网页设计是非常有帮助的：

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

它经过如何利用灵活的图像，以及如何实现媒体查询（以及其他有用的一起事情）。

原文章由列表除了（砸在这里添加一些东西，那里）：http://www.alistapart.com/articles/responsive-web-design/

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

来源

2011-04-07 05:26:20 Dan

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

回答

相关问题