如何设置不同的屏幕分辨率的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％，以使它们与页面大小相等。