如何设置不同屏幕分辨率的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/