如何自動調整窗口大小的字體和圖像（完整網站）的大小？

如何自動調整窗口大小的字體和圖像（完整網站）的大小？人們將擁有不同的屏幕分辨率。如何自動調整窗口大小的字體和圖像（完整網站）的大小？

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

如何自動調整窗口大小的字體和圖像（完整網站）的大小？

回答

相關問題