我对 css/html 世界比较陌生。我正在尝试创建一个网站。我注意到，虽然当我尝试在较低分辨率的屏幕上查看它时，即使在我的屏幕上一切看起来都很棒，但一切都搞砸了。有没有办法通过css让它正确显示？
这是我正在尝试实现并使低分辨率也成为可能的图像: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>最佳答案
如果您所说的“较低分辨率”意味着不同的屏幕尺寸，即移动设备、平板电脑、台式机，或者同一桌面上什至更小的窗口尺寸，那么您的解决方案在于 CSS 媒体查询。您似乎已经掌握了 HTML 和 CSS 的基础知识。
使用 CSS 的下一步应该是学习媒体查询，以便根据屏幕尺寸/分辨率随机播放/移动页面内容。
Bootstrap 非常适合为您处理这个问题，但如果您是 HTML/CSS 新手，您应该在使用 Bootstrap 之前了解构建它的代码。当然，这取决于您想要达到的技能水平。
W3Schools 非常适合初学者掌握关键概念。查看他们关于媒体查询的部分:
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
或
另一个很棒的资源是 CSS-Tricks。查看他们的文章:
https://css-tricks.com/css-media-queries/
最后但同样重要的是，确保包含元标记:
<meta name="viewport" content="width=device-width, initial-scale=1">
这将以设备屏幕宽度呈现屏幕内容，并在加载时设置页面内容的缩放级别。只需放入上面的元标记，您就不会注意到太多不同。您需要先创建一些 CSS 媒体查询才能看到此元标记的全部优势。
祝你好运，玩得开心!
关于html - CSS/HTML 适合任何分辨率，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43105522/