Question

我对css / html世界比较陌生。我正在尝试创建一个网站。我注意到尽管我尝试在较低分辨率的屏幕上查看它时，即使屏幕上的一切看起来都很棒，但一切都搞砸了。有没有办法让它通过CSS正确显示？

这是我想要实现的目标的图像，也可以降低分辨率：image 这是我的css到目前为止（第一部分是一个重置器。我从观看一个youtube教程得到它）：

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

如果您指的是＆＃34;较低的分辨率＆＃34;意味着不同的屏幕尺寸，例如移动设备，平板电脑，桌面设备，甚至是同一台桌面上的小窗口尺寸，那么您的解决方案就在于 CSS媒体查询。您似乎已经掌握了HTML和CSS的基础知识。

使用CSS的下一步应该是了解媒体查询，以根据屏幕大小/分辨率对页面内容进行随机播放/移动。

Bootstrap非常适合为您处理此问题，但如果您是HTML / CSS的新手，您应该在使用之前了解Bootstrap所构建的代码。当然，这取决于你想要达到的技能水平。

W3Schools非常适合初学者掌握关键概念。查看他们关于媒体查询的部分：

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

OR

另一个很棒的资源是CSS-Tricks。看看他们的文章：

https://css-tricks.com/css-media-queries/

最后但同样重要的是，请确保包含元标记：

<meta name="viewport" content="width=device-width, initial-scale=1">

这将在设备屏幕宽度处呈现屏幕内容，并在加载时设置页面内容的缩放级别。只要投入上面的元标记，你就不会发现太多不同。您需要首先创建一些CSS媒体查询，以查看此元标记的完整优势。

祝你好运，玩得开心！

Answer 2

使用bootstrap等框架来构建应用程序总是一个好主意。这将有助于您的应用程序在所有类型的屏幕上都很棒。

你可以从这个网站上学到它。

https://www.w3schools.com/bootstrap/

https://www.youtube.com/watch?v=qIULMnbH2-o

http://getbootstrap.com/getting-started/

如果你不使用像这样的任何框架，那么制作响应式网站将是一项繁琐的工作。 Bootstrap易于学习，可为您节省大量时间。

如果您决定不使用像bootstrap这样的框架，那么您将不得不使用媒体查询根据屏幕大小调整元素大小。

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

CSS / HTML适合任何分辨率

2 个答案: