我如何使我的简单的网站看起来正确的不同的决议？
我非常简单的网站(见下面的代码)是基于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;
}回答 3
Stack Overflow用户
发布于 2014-02-08 22:03:24
你的第一课。如果你使用绝对定位，除非你绝对(没有双关意)知道你在做什么，你很可能会在调整大小时破坏你的设计。
您需要流体和/或响应性布局，这些布局可以很好地适应不同的大小。
这是一篇很好的文章让你开始。
http://www.creativebloq.com/css3/create-fluid-layouts-html5-and-css3-9122768
即使您想要一个固定大小的布局，您仍然必须考虑到浏览器可能是不同的大小。因此，您需要使用自动边距，除非计划将所有内容绑定到浏览器窗口的左上角。
例如，对块级元素(如div)进行居中非常容易，只需将左右边距设置为auto。
#content { margin: 0 auto; }另外，使用浏览器的自然流布局对您有利。大多数事情都是基于他们的位置(边距、边框、填充等)基于他们的父元素。因此，通过使用适当的填充或空白处，您可以在您想要的东西的位置，他们将自动重新布局在正确的地方，基于该家长。
Stack Overflow用户
发布于 2014-02-08 22:10:00
你今天在“网页/移动设计”中遇到了一个主要的困难.
您的设计主要使用static设计原则。
使用responsive / adaptive或fluid ( a.k.a )。( liquid )设计原则：
响应：design
适应性：design
Go看到了当今使用的前四大设计哲学的例子，以及它们之间的比较：
- http://liquidapsive.com/
...there :你可以实时地在它们之间切换，自己玩不同的东西，并通过例子学习。
尤其是转向responsive设计是“网页设计”及其哲学的一个重大时代变化。它的教学不够广泛，但也不是很难学习。
“肤浅”的更改，比如在CSS中从px调整到em或%，并不能真正帮助您。今天，设计必须从一开始就考虑到手机、平板电脑和低分辨率和高分辨率桌面。在您查看responsive / adaptive和fluid设计时祝您好运。
Stack Overflow用户
发布于 2014-02-08 21:04:51
不要使用百分比，或者尝试将100%的描述添加到body标记中。
https://stackoverflow.com/questions/21651757
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号