如何設置不同的屏幕分辨率的HTML頁面大小和頁面組件？

Question

頁面主體獲取寬度作爲屏幕大小。那麼如何通過相關屏幕大小來調整頁面的其他組件？

Answer 1

您需要使用媒體查詢。在這裏，我只是公佈一個簡單的演示..看看我的小提琴..

Sample Fiddle

CSS

@media screen and (max-width:960px) 
{ 
#header 
{ 
    background: red; 
    color: white; 
    height: 50px; 
    width: 100%; 
} 
} 
@media screen and (min-width:720px) and (max-width:959px) 
{ 
#header 
{ 
    background: green; 
    color: white; 
    height: 50px; 
    width: 100%; 
} 
} 
@media screen and (min-width:480px) and (max-width:719px) 
{ 
#header 
{ 
    background: black; 
    color: white; 
    height: 50px; 
    width: 100%; 
} 
} 
@media screen and (max-width:479px) 
{ 
#header 
{ 
    background: purple; 
    color: white; 
    height: 50px; 
    width: 100%; 
} 
} 

有關媒體查詢你可以通過這些以下鏈接更多的信息。

http://css-tricks.com/css-media-queries/

http://en.wikipedia.org/wiki/Media_queries

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

Answer 2

您需要詳細說明您的問題，從我的理解：您需要將組件的寬度設置爲100％，以使它們與頁面大小相等。