0
我相对较新的CSS/HTML世界。我正在尝试创建一个网站。我注意到尽管在我尝试在低分辨率屏幕上查看时，屏幕上的所有内容看起来都很棒，但一切都搞乱了。有没有办法让它通过CSS正确显示？CSS/HTML适合任何分辨率
这里是我想要达到并有可能使较低分辨率以及图像：image 这里是我的CSS迄今（第一部分是复位器我得到它，因为它是从看YouTube的教程）：
html,body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
nav ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/* change colours to suit your needs */
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
/* change colours to suit your needs */
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input,
select {
vertical-align: middle;
}
/*!!!!!END OF RESET!!!!!*/
/*MY CSS*/
body {
width: 100%;
height: 100%;
}
#logo1 {
padding-left: 25px;
}
#logo2 {
padding-left: 260px;
}
#eternal {
padding-top: 15px;
display: block;
position: absolute;
left: 0;
}
#prwtoetis {
padding-top: 20px;
float: right;
position: absolute;
bottom: 0%;
left: 0;
}
#akyri {
padding-top: 5px;
display: block;
position: absolute;
right: 0%;
}
#akyri2 {
padding-top: 5px;
display: block;
bottom: 0%;
right: 0%;
position: absolute;
}
#quote {
text-align: center;
padding: 13%;
font-family: Calibri;
font-size: 35px;
}
a {
color: #000;
text-decoration: none;
}
body {
background-color: #e1e8ea;
width: 100%;
min-width: 600px;
max-width: 2000px
}
header {
background-color: #b5c4c9;
padding-top: 8px;
padding-bottom: 10px;
width: 100%;
height: 159px;
}
header img {
float: left;
}
nav {
float: left;
}
nav ul {
margin-top: 86px;
margin-left: 200px;
}
nav ul li {
display: inline-block;
margin-left: 20px;
}
nav ul li a {
font-family: Calibri;
font-size: 22px;
}
a.ex5:hover,
a.ex5:active {
text-decoration: underline;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RateYourProfessor</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="site-wrapper">
<header>
<div>
<img id="logo1" src="images/logo.png">
<nav>
<ul>
<li><a class="ex5" href="index.php">HOME</a></li>
<li><a class="ex5" href="create.php">CREATE PROFESSOR</a></li>
<li><a class="ex5" href="rate.php">RATE PROFESSOR</a></li>
<li><a class="ex5" href="scoreboard.php">SCOREBOARD</a></li>
<li><a class="ex5" href="top5.php">TOP 5</a></li>
</ul>
</nav>
<img id="logo2" src="images/logo.png">
</div>
</header>
<section>
<div>
<img id="eternal" src="images/eternal.png">
<img id="prwtoetis" src="images/prwtoetis.png">
<img id="akyri" src="images/akyri.png">
<img id="akyri2" src="images/akyri2.png">
</div>
<div id="quote"><br> There is no end to education. <br>It is not that you read a book, pass an examination, and finish with education. <br>The whole of life, from the moment you are born to the moment you die, is a process of learning.
<br>- <i>Jiddu Krishnamurti</i>
</div>
</section>
</div>
</body>
</html>
你可以使用http://getbootstrap.com/getting-started/它的面糊帮助使网站和响应 –