如何在瀏覽器窗口重新調整大小時調整網頁大小？

-1

在我的網站這是在背景圖片幻燈片放映工作。但我需要爲身體也一樣。誰能幫我？如何在瀏覽器窗口重新調整大小時調整網頁大小？

.cb-slideshow li span { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    color: transparent; 
    background-size: cover; 
    background-position: 50% 50%; 
    background-repeat: none; 
    opacity: 0; 
    z-index: 0; 
    -webkit-backface-visibility: hidden; 
    -webkit-animation: imageAnimation 36s linear infinite 0s; 
    -moz-animation: imageAnimation 36s linear infinite 0s; 
    -o-animation: imageAnimation 36s linear infinite 0s; 
    -ms-animation: imageAnimation 36s linear infinite 0s; 
    animation: imageAnimation 36s linear infinite 0s; 
}

來源

2013-03-27 Anju

我不敢說我不知道你在找什麼。你能澄清你需要什麼嗎？ – DACrosby 2013-03-27 06:40:29

如果要調整您的頁面時，瀏覽器窗口大小的變化，你可以使用媒體查詢（僅限現代瀏覽器都支持這一點） - 或者你可以選擇使用JavaScript（第三個選項是兩個）。然而你的問題表明你想避免JavaScript。我在下面用媒體查詢做了一個例子。當您的屏幕尺寸在800像素到1000像素之間時，將應用CSS。你可以將這些陳述結合起來，比如只用min或max就可以了。

@media all and (max-width: 1000px) and (min-width: 800px) { 
    .cb-slideshow li span { 
    /* css here*/ 
    } 
}

您可以使用媒體查詢更改任何元素。它通常用於創建響應式設計。

來源

2013-03-27 06:45:11

Hi Xeano？我試過了。但沒有工作。我想知道我該如何在JavaScript中編寫此代碼？謝謝 – Anju 2013-03-27 08:39:46

你應該可以使用媒體查詢。你正在使用哪種瀏覽器？這裏有一個小指南，如果它不適合你。它最後一次幫助了我。 http://stackoverflow.com/questions/7859336/css3-media-queries-not-working – 2013-03-27 08:49:13

仍然無法正常工作。使用Firefox。我不想在瀏覽器更改時更改設備寬度。當我最小化網頁我需要身體也應該儘量減少（所有的內容在身上）。我想我應該使用它的Java腳本。你有什麼想法嗎？ – Anju 2013-03-27 10:55:27

如果你正在尋找如何設置你的身體，即使它沒有足夠的內容窗口範圍內，儘量

html, body{ 
    width: 100%; 
    height: 100% 
}

來源

2013-03-27 06:46:13

可以使用一種叫做響應式設計。它使用媒體查詢根據屏幕分辨率進行調整。只需在任何流行的搜索引擎中搜索響應式設計，就會從鏈接中學到很多東西。

現在您可以將此樣式添加到您的身體

body { 
    width: 100%; 
    height: 100%; 
}

這將使它的身體反應。

來源

2013-03-27 06:55:54 KrazzyProgrammer

簡單的例子，只是添加到您的頁面，並在頁面低於960像素的整個身體就會消失

@media screen and(max-width:960px){ 
    body{ 
     display:none; 
    } 
}

現在您可以添加，以適應各種尺寸的需要發生了許多變化

來源

2013-03-27 06:59:18 iConnor

如何在瀏覽器窗口重新調整大小時調整網頁大小？

回答

相關問題