html - 为所有屏幕分辨率设置网页

Question

我在 asp.net 中创建了一个网页。它适用于普通屏幕。当在更宽的屏幕上显示时，侧面和底部都有很多空白。我怎样才能使页面适合所有屏幕尺寸。我在之前的帖子中看到以 % 为单位设置宽度。但这行不通。谁能帮我解决这个问题？提前致谢。

Answer 1

我同意您需要更具体地尝试此 css 代码。

body{
width:100%;
height:100%;
}

然后，您可以创建具有固定百分比宽度和高度的容器 DIV 来创建网页的某些部分，例如页眉、侧边栏、主要内容、页脚......等。

如果正确使用， % 方法是最可行的方法。发布 html/css/js 的jsfiddle以获得具体帮助。

Answer 2

您可以通过定义顶部、右侧、底部和左侧 css 属性来尝试根元素的绝对定位（从 body 标记向下一步）。像这样： #page{ positioning: absolute; top: 0; right: 0; bottom: 0; left: 0; } 然后将其他元素放置在该根元素内。

Answer 3

你有几个选择：

将 html 或 body 标签设置为 100% 宽度并带有背景。然后将站点其余部分的容器设置为您想要的任何像素大小的最大宽度。这将防止您的网站变得过于冗长和凌乱，但仍能解决空白问题。像这样的东西：

body {
background:#HEX url(images/2000pxwideimage.png);
width:100%;
}

#wrapper {
max-width:960px;
}

您可以使用 css3 媒体查询根据屏幕宽度调整网站的布局。这样做的好处是您可以适应越来越小的屏幕尺寸，同时保持布局美观，这在某些情况下可能意味着提供显着不同的 css。一个例子可能是水平导航，在较小的屏幕尺寸下，您希望成为垂直导航以便于使用。看起来像这样：

@media (min-width:960px) {
/* Browser window must be at least 960px wide to get these rules */
}

@media (max-width:320px) {
/* Something similar to this would work for very small screens like phones */
}