如何设置不同屏幕分辨率的html页面大小和页面组件？

Question

页面正文获取屏幕大小的宽度。那么如何使用相关的屏幕尺寸来调整页面的其他组件？

Answer 1

您需要根据我的理解详细说明您的问题：您需要将组件的宽度设置为100％，使它们等于页面大小。

Answer 2

您需要使用媒体查询。在这里，我发布了一个简单的演示..看看我的小提琴..

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/