我一直在做一个网站，发现here , 它在我的显示器 (1440 x 900) 上看起来不错，但是在超大显示器上显示时看起来非常普通。我给外框一个绝对高度和宽度，这显然是我的问题的原因，但是当图像都是固定高度和宽度时，我该怎么做才能解决这个问题？
我在某处读到我可以检查页面加载时监视器的尺寸 - 有人会推荐这个吗？
在较大的显示器上，左右两侧以及外框下方都有很多空白区域。
感谢您的帮助!
-埃文
最佳答案
你可以通过两种方式做到这一点:
- CSS 3 媒体查询
- 流体布局
既然您说您也将支持 IE，CSS 3 媒体查询将无法在 IE 9 以下工作，所以让我们使用流体布局。为此，您可以做一些事情:
CSS 更改
#full-height-template-container {width: 1225px;}
#navigation-menu-container {width: 149px;}
#static-frontpage-padding {width: 855px;}
Replace it to:
#full-height-template-container {width: 90%;}
#navigation-menu-container {width: 20%;}
#static-frontpage-padding {width: 80%;}
可能需要进行一些调整。
CSS 3 媒体查询
媒体查询是当今 CSS 最激动人心的方面之一。它们将使我们能够更改我们的布局以适应不同设备的确切需求 - 而无需更改内容。
CSS 3 媒体查询示例和演示
HTML 标记
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Media query Resolution Dependent Layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="stylesheets/master.css" />
</head>
<body>
<div id="container">
<h1>
Site name
</h1>
<div id="nav">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
<div id="content">
<h2>
Main heading here
</h2>
<p>
<img class="feature-image" src="fern.jpg" alt="fern" />Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
<div id="extras">
<h3>
Related info
</h3>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</body>
</html>
CSS 代码
/* ----------------------------
simple reset
---------------------------- */
html, body, ul, ol, li, form, fieldset, legend
{
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6, p { margin-top: 0; }
fieldset,img { border: 0; }
legend { color: #000; }
li { list-style: none; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
table
{
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td
{
text-align: left;
vertical-align: top;
font-weight: normal;
}
input, textarea, select
{
font-size: 110%;
line-height: 1.1;
}
abbr, acronym
{
border-bottom: .1em dotted;
cursor: help;
}
body
{
margin: 20px;
color: #000;
background: #fff;
font: 90%/1.3 "DejaVu Sans", "URW Gothic L", "Helvetica Neue", Helvetica, Arial, "Microsoft Sans Serif", sans-serif;
}
#container
{
float: left;
width: 1000px;
background: #bbb;
}
#nav
{
float: left;
width: 200px;
background: lime;
}
#content
{
float: left;
width: 550px;
margin: 0 0 0 25px;
background: yellow;
}
#extras
{
float: right;
width: 200px;
background: gray;
}
.feature-image
{
float: right;
margin: 0 0 10px 10px;
}
@media screen and (max-width:999px)
{
#container { width: 800px; }
#extras
{
clear: left;
float: none;
margin: 0 0 0 225px;
width: 550px;
}
}
@media screen and (max-width:480px)
{
#container { width: 400px; }
#nav
{
float: none;
width: auto;
}
#content
{
float: none;
width: auto;
margin: 0;
}
#extras
{
float: none;
width: auto;
margin: 0;
}
.feature-image { display: none; }
}
演示
您可以在 CSS3 Media query layout example 找到工作演示.享受吧!
关于css - 针对不同分辨率的显示器优化网页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11437322/