縮放瀏覽器窗口時自動縮放網站

我有一個網站有點大的圖像，很適合1920/1080窗口，但不是較小的窗口。即使不同的瀏覽器也會顯示其他一些內容。我GOOGLE了很多，但無法找到我需要的東西！縮放瀏覽器窗口時自動縮放網站

這裏我有一個例子：http://www.serialcut.com/

這正是我需要的。

這必須用任何類型的jQuery或JavaScript來完成。

有人可以給我一些代碼來做到這一點？

2014-02-14 user2197948

這就是所謂的「自適應」設計中，通常大部分是CSS，但也有使用引導或jQuery的 –

請包括截圖整齊的方式（[JSFiddle]]（http://jsfiddle.net/）的實際結果和期望的結果以及[最小，完整，測試和可讀示例]（http://stackoverflow.com/help/mcve）？，其中的代碼也應粘貼在問題中），而不是模糊的描述和鏈接。 – Dukeling

你可以使用CSS3轉換和媒體查詢。

http://www.w3.org/TR/css3-transforms/
http://www.w3.org/TR/css3-mediaqueries/

你的頁面屆時將根據媒體查詢在你的CSS樣式表設置的規則調整：

@media screen and (min-width:1200px) { 

    #container { 

     width:1100px; 

    } 

    header h1#logo a { 

     width:1100px; 
     height:150px; 
     background:url(image.jpg) no-repeat 0 0; 

    }       

}

您也可以縮放，旋轉，移動等任何元素從您的網頁設置其轉換屬性：

div { 

    transform: scale(2) rotate(45deg); 
    transform: scale(2) rotate3d(0, 0, 1, 45deg); 

}

，如果你願意，你可以訪問通過純JavaScript代碼，這個屬性：

document.querySelector('div').style.webkitTransform="scale(3)";

來源

2014-02-14 14:12:48 user3310252

你的第一個CSS無效..你有一個'}'太多了。 – putvande

感謝您指出我的錯誤。現在是正確的。 – user3310252

縮放瀏覽器窗口時自動縮放網站

回答

相關問題