如何讓我的網頁在不同尺寸的瀏覽器窗口中看起來不錯？

我有一個關於優化網頁的問題......嗯，讓我從頭開始。如何讓我的網頁在不同尺寸的瀏覽器窗口中看起來不錯？

HTML代碼：

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="main.css"> 
    <title></title> 
</head> 
<body> 

    <div id="header"> Text... </div> 
    <div id="body"> </div> 

</body> 
</html>

CSS代碼：

#header 
    { 
     background-color: green; 
     width: 50%; 
     height: 25%; 
     left: 25%; 
     position: absolute; 
    } 

#body 
    { 
     background-color: red; 
     width: 50%; 
     height: 55%; 
     left: 25%; 
     top: 25%; 
     position: absolute; 
    }

的問題是，每當我最小化窗口了一下，我的div收縮在一起。這不是我希望它出現的方式。在弄清楚瞭如何解決這個問題之後，我想出了這個「偉大」的想法來製作一個覆蓋所有其他div的div包裝。

那麼我的div需要換行權？

<div id="wrap"> 
    <div id="header"> </div> 
    <div id="body"> </div> 
</div> 



#wrap { 
    width: 600px; 
    height: 800px; 
    position: absolute; 
}

現在在我的CSS代碼，我需要設置的包裝DIV的高度和寬度的像素，對不對？現在，這將工作，但問題是。我如何在另一臺計算機屏幕上優化這一點？我的意思是這不適用於所有用戶的權利？

無論如何..讓我再一次重複這個問題... 如何優化我的網頁以最小化瀏覽器中的窗口並在所有屏幕上工作？我的意思是一切都必須與像素相關嗎？現在如何* *是假設工作如果所有的屏幕有不同的大小？我的意思是你需要使用％來使它工作。我不希望你們主要針對這個問題，但給我一些建議，如何以最佳方式優化網頁。

來源

2013-07-22 user2545642

如果問題不夠清楚，我會重複一遍。正如我所說我的英語不完美，所以有一些理解。我也想指出，我對stackoverflow很陌生，所以代碼行可能有點兒，呵呵。謝謝！ – user2545642

可以在適當情況下使用％來拉伸元素。然而，更多「特定」元素，例如標題，您可能希望保持固定（例如，通過高度修改標題元素）。 – suspectus

@ user2545642：這不僅僅是你的英語。「讓我再一次重複這個問題......」 - 你怎麼只寫一次，很清楚？可能先用母語，然後儘可能把它翻譯成英文。你的問題現在有點亂。 –

確定這裏就是我usally做：

每當我想創建一個網站，不填充頁面的100％左右我創建一個包裝的所有內容，像你這樣。你可以用固定值或％值來做到這一點。如果你想使用％值，你可以使用min-width或max-width作爲包裝。這樣你只需要定義一次固定值，所有的內容都可以用％來定義。這有助於特別是如果您稍後想要調整整個內容的大小，如果您意識到它可能看起來更好一些，但寬度稍大一些。

如果您對容器使用固定高度，高度值很少使用％值，只能使用％值作爲高度。如果你想爲不同的屏幕分辨率創建不同的佈局，你總是可以看看@media標籤，它允許你創建分辨率特定的CSS代碼。但是，這只是建議一小組決議，比如說，2種不同的桌面電腦分辨率和2種不同的手機分辨率（4種不同的css定義）。

我通常會嘗試使用帶有％值的min-width和max-width，如果這對於彈出窗口或固定元素（如邊欄）不可用，則使用px值。如果我想要支持多列我的內容，如果用戶有更大的屏幕我利用@media

我也不明白你爲什麼使用絕對定位。如果您只想在容器上使用margin: 0 auto;作爲中心內容。順便說一句，如果你想指定一個頭，你也可以使用<header>標籤。使用div並給它一個class/id是沒有錯的，但是我認爲你應該知道在html5/css3的世界裏有一些新的東西

EIDT：你的標題有點混亂，因爲你的問題完全不同。對於網站優化我強烈建議http://developer.yahoo.com/performance/rules.html或先進的優化，你可以使用https://developers.google.com/closure/和https://code.google.com/p/closure-stylesheets/

來源

2013-07-22 11:25:25

Four的上面的代碼：你可以使用：的

#wrap { 
margin:0 auto; 
    width: 600px; 
    height: 800px; 
    position: absolute; 
}

代替

#wrap { 
    width: 600px; 
    height: 800px; 
    position: absolute; 
}

又使當窗口重新變大或者您必須學習時，使您的網頁看起來相同響應式Web開發。開始在你的頁面中使用媒體查詢。對於響應式設計使用媒體查詢：下面是media queries的好例子。也學習如何使用它。

來源

2013-07-22 11:25:49

「這是媒體查詢的好例子」 - *哪裏*是媒體查詢的好例子？ –

@Paul：這裏是鏈接http://css-tricks.com/css-media-queries/ –

你可以編輯你的問題來包含它。 –

如何讓我的網頁在不同尺寸的瀏覽器窗口中看起來不錯？

回答

相關問題