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

Question

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

CSS？ jQuery的？ html％（在chrome中，效果很好）

我需要制作幻燈片（演示文稿，幻燈片由ckeditor制作）

Answer 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);    
    }

});

根據需要調整圖像大小的數學運算會變得更加復雜，但這是基本思想。

Answer 2

您幾乎可以將任何事件附加到以下內容：

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

但是，如果您想做出更具適應性的內容，則必須評估html元素的width x height ，由此您可以得出合理的字體大小。

確實沒有辦法將其進一步推廣，您必須針對要調整大小的元素逐個編寫一個函數。

Answer 3

我認為您會發現有關響應式Web設計的這篇文章非常有幫助：

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

它介紹了如何利用靈活的圖像以及如何實現媒體查詢（以及其他有用的東西）。

原始文章是由A List Apart撰寫的（搗亂在這里和那里添加了一些東西）： http : //www.alistapart.com/articles/sensitive-web-design/

這是響應式演示的最終HTML ： http : //www.alistapart.com/d/sensitive-web-design/ex/ex-site-FINAL.html