我非常简单的网站（见下面的代码）基于CSS / HTML。
在1600 x 900看来它看起来很完美，但是如果我改变它，网站就会变得非常混乱。
如何让它在不同的分辨率下看起来正确？
HTML：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<title>Dogma Hostil</title>
</head>
<body>
<div id="titulo">
<p>Dogma Hostil</p>
</div>
<div id="raya"><p>___________</p></div>
<div id="cita">
<p>Todo comienzo tiene su encanto</p>
<a id="author" href="http://es.wikipedia.org/wiki/Johann_Wolfgang_von_Goethe">Goethe</a>
</div>
</body>
</html>
CSS：
#titulo {
position: absolute;
left: 17%;
top: 17%;
z-index:1;
display: inline-block;
}
#titulo p {
color: black;
font-family: Verdana;
font-size: 1000%;
z-index: 2;
display: inline-block;
}
#titulo p:hover {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #00ff78, 0 0 70px #00ff78, 0 0 80px #00ff78, 0 0 100px #00ff78, 0 0 150px #00ff78, 0 0 299px #000000, 0 0 5px #000000;
z-index: 3;
}
#raya {
position: absolute;
left:16%;
top:20%;
z-index: -1;
}
#raya p {
color:black;
font-family: Verdana;
font-size: 1000%;
z-index: 0;
}
#cita{
position: absolute;
left: 80%;
}
#cita p {
color:black;
font-family: Verdana;
font-size: 100%;
}
#author {
position: absolute;
left:78%;
top:65%;
color: black;
font-family: Verdana;
text-decoration: none;
}
答案 0 :(得分：2)
您正在遇到“网络/移动设计”中的主要困难之一...
您的设计主要使用static设计原则。
responsive / adaptive或fluid（a.k.a。liquid）设计原则：响应：http://en.wikipedia.org/wiki/Responsive_web_design
自适应：http://en.wikipedia.org/wiki/Adaptive_web_design
查看今天使用的四大设计理念示例，以及它们的比较方式：
...你可以在那里实时切换，自己玩差异，并通过实例学习。
转向responsive设计尤其是“网页设计”及其理念的重大变革。它的教学范围不够广泛，但学习起来并不是很困难。
“肤浅”的更改，例如在CSS中从px调整到em或%并不能真正帮助您。今天，设计必须采取手机，平板电脑和低分辨率＆amp;和高分辨率桌面从一开始就考虑在内。在您考虑responsive / adaptive和fluid设计时，祝您好运。
答案 1 :(得分：1)
你的第一课。如果你使用绝对定位，除非你绝对（没有双关语）知道你在做什么，否则你可能会在调整大小时破坏你的设计。
您需要流畅和/或响应式布局，这些布局可以很好地适应不同的尺寸。
这是一篇很好的文章，可以帮助您入门。
http://www.creativebloq.com/css3/create-fluid-layouts-html5-and-css3-9122768
即使您需要固定大小的布局，您仍需要考虑浏览器的大小不同。因此，您需要使用自动边距，除非您计划将所有内容绑定到浏览器窗口的左上角。
例如，中心块级元素（例如div）非常容易，只需将左右边距设置为auto即可。
#content { margin: 0 auto; }
此外，使用浏览器的自然流程布局对您有利。大多数东西都是基于它们的父元素来定位它们的位置（边距，边框，填充等）。因此，通过使用适当的填充或边距，您可以将内容放置在您想要的位置，并且它们将根据父级自动重新排列在正确的位置。
答案 2 :(得分：0)
不要使用百分比或尝试将100％描述添加到正文标记