针对不同的分辨率优化网站

Question

过去几天，我一直试图解决这个问题。我现在已经习惯了大约一个月的HTML和CSS了，所以我还是很新的。在CSS中，我将位置设置为绝对值，所有位置都以百分比表示。我应该为不同的分辨率编写不同的CSS文档吗？目前我基于1920 X 1080的所有内容。根据我的理解，我需要一些像响应式布局，但我似乎无法弄清楚如何到达那里。我确实在Codecademy上学习了我制作airbnb页面的内容，这似乎很好地适应了不同的分辨率。我看过那个，所以我觉得它可能只是我想念的东西。 谢谢！

如果您在1080p中运行下面的代码，它看起来会很好，而任何较低的代码都会在整个地方乱七八糟。

＆＃13;

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
}
.container {
  width: 640px;
  margin: 0 auto;
}
/*start of header*/

.header {
  background: #8A0808;
}
.nav {
  margin: 0;
  padding: 20px 0;
}
.nav li {
  display: inline;
}
.nav a {
  color: #E6E6E6;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 15px;
  display: inline;
  text-transform: uppercase;
  margin-left: 25px;
  text-decoration: none;
}
/*end of header*/

/*start of central box*/

.centralbox {
  width: 65%;
  height: 150%;
  position: absolute;
  top: 6%;
  left: 17.5%;
  background-color: #151515;
}
/*end of central box*/

/*start of logo*/

.logo {
  width: 22%;
  height: 16%;
  position: absolute;
  top: 7%;
  left: 21%;
}
/*end of logo*/

/*start of h1*/

.h1 {
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  position: absolute;
  top: 20%;
  left: 42.5%;
  text-decoration: underline;
}
/*end of h1*/

/*start of introduction1*/

.introduction1 {
  color: #E6E6E6;
  font-family: 'Montserrat', sans-serif;
  position: absolute;
  left: 21%;
  top: 27%;
  width: 58%;
}
/*end of introduction1*/

/*start of main picture*/

.mainimage {
  background-color: #585858;
  position: absolute;
  top: 34%;
  left: 21%;
  width: 42%;
  height: 42%;
}
.boxextension {
  width: 16%;
  height: 42%;
  background-color: #585858;
  position: absolute;
  top: 34%;
  left: 63%;
}
/*end of main picture*/

/*start of h2*/

.h2 {
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  position: absolute;
  top: 35%;
  left: 62%;
  text-decoration: underline;
}
/*end of h2*/

/*start of introduction2*/

.introduction2 {
  color: #E6E6E6;
  font-family: 'Montserrat', sans-serif;
  width: 16%;
  position: absolute;
  top: 41%;
  left: 62%;
}
/*end of introduction2*/

/*start of table*/

.AG9S Table {
  width: 20%;
  border: 2px solid;
  border-color: #000000;
  position: absolute;
  top: 78%;
  left: 21%;
  border-radius: 10px;
  background-color: #000000;
  list-style-type: none;
}
.AG9S Table td {
  vertical-align: middle;
  border: 1px solid #000000;
  text-align: left;
  padding: 7px;
  font-size: 12px;
  font-family: 'Montserrat', sans-serif;
  color: #E6E6E6;
}
.AG9S Table tr:nth-child(odd) {
  background-color: #8A0808;
}
.AG9S Table tr:nth-child(even) {
  background-color: #2E2E2E;
}
.AG9S Table tr:first-child td:first-child {
  border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -moz-border-top-left-radius: 10px;
}
.AG9S Table tr:first-child td:last-child {
  border-top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-top-right-radius: 10px;
}
.AG9S Table tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-bottom-right-radius: 10px;
}
.AG9S Table tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-bottom-left-radius: 10px;
}
/*end of table*/

/*start of infotable1*/

.infotable Table {
  width: 30%;
  border: 2px solid;
  border-color: #000000;
  position: absolute;
  top: 78%;
  left: 42%;
  border-radius: 10px;
  background-color: #000000;
}
.infotable Table td {
  vertical-align: middle;
  border: 1px solid #000000;
  text-align: left;
  padding: 7px;
  font-size: 12px;
  font-family: 'Montserrat', sans-serif;
  color: #E6E6E6;
}
.infotable Table tr:nth-child(odd) {
  background-color: #8A0808;
}
.infotable Table tr:nth-child(even) {
  background-color: #2E2E2E;
}
.infotable Table tr:first-child td:first-child {
  border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -moz-border-top-left-radius: 10px;
}
.infotable Table tr:first-child td:last-child {
  border-top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-top-right-radius: 10px;
}
.infotable Table tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-bottom-right-radius: 10px;
}
.infotable Table tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-bottom-left-radius: 10px;
}
/*end of infotable1*/

/*start of h3*/

.h3 {
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  position: absolute;
  top: 90%;
  left: 42%;
  text-decoration: underline;
}
/*end of h3*/

/*start of introduction 3*/

.introduction3 {
  color: #E6E6E6;
  font-family: 'Montserrat', sans-serif;
  position: absolute;
  top: 96%;
  left: 42%;
  width: 30%;
}
/*end of introduction 3*/

/*start of h4*/

.h4 {
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  position: absolute;
  top: 102%;
  left: 42%;
  text-decoration: underline;
}
/*end of h4*/

/*start of introduction 4*/

.introduction4 {
  color: #E6E6E6;
  font-family: 'Montserrat', sans-serif;
  position: absolute;
  top: 108%;
  left: 42%;
  width: 30%;
}
/*end of introduction 4*/

/*start of h5*/

.h5 {
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  position: absolute;
  top: 117%;
  left: 42%;
  text-decoration: underline;
}
/*end of h5*/

/*start of introduction 5*/

.introduction5 {
  color: #E6E6E6;
  font-family: 'Montserrat', sans-serif;
  position: absolute;
  top: 123%;
  left: 42%;
  width: 30%;
}
/*end of introduction 5*/

/* start of menu*/

.menu {
  position: absolute;
  top: 10%;
  left: 2%;
}
/*end of menu*/

/*start of footer*/

.footer {
  width: 100%;
  position: absolute;
  top: 150%;
  background-color: #333333;
  color: #ffffff;
  padding: 30px 0;
}
.footer p {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
}
/*end of footer*/

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Lorem Ipsum Dolor</title>

  <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
  <link rel='stylesheet' href='testcss.css' />
</head>

<body background="http://i.imgur.com/EUCIQ9x.png">
  <!--start of header-->
  <div class="header">
    <div class="container">
      <ul class="nav">
        <li><a href="#"> Lorem </a>
        </li>
        <li><a href="#"> Home </a>
        </li>
        <li><a href="#"> Stuff </a>
        </li>
        <li><a href="#"> This </a>
        </li>
        <li><a href="#"> That </a>
        </li>
      </ul>
    </div>
  </div>
  <!--end of header-->
  <!--start of central box-->
  <div class="centralbox">
  </div>
  <!--end of central box-->
  <!--start of h1-->
  <div class="h1">
    <h1> Overview </h1> 
  </div>
  <!--end of h1-->
  <!--start of spec table 1-->
  <div class="AG9S">
    <ul>
      <table>
        <tr>
          <td>1</td>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>5</td>
          <td>6</td>
        </tr>
        <tr>
          <td>7</td>
          <td>8</td>
        </tr>
        <tr>
          <td>9</td>
          <td>10</td>
        </tr>
        <tr>
          <td>11</td>
          <td>12</td>
        </tr>
        <tr>
          <td>13</td>
          <td>14</td>
        </tr>
        <tr>
          <td>15</td>
          <td>16</td>
        </tr>
        <tr>
          <td>17</td>
          <td>18</td>
        </tr>
        <tr>
          <td>19</td>
          <td>20</td>
        </tr>
        <tr>
          <td>21</td>
          <td>22</td>
        </tr>
        <tr>
          <td>23</td>
          <td>24</td>
        </tr>
        <tr>
          <td>25</td>
          <td>26</td>
        </tr>
        <tr>
          <td>27</td>
          <td>28</td>
        </tr>
        <tr>
          <td>29</td>
          <td>
            <li>30</li>
            <li>31</li>
            <li>32</li>
            <li>33</li>
          </td>
        </tr>
      </table>
    </ul>
  </div>
  <!--end of table 1-->
  <!--start of logo-->
  <div class="logo">
    <img src="https://git-scm.com/images/logos/downloads/Git-Logo-Black.png" width="100%" height="100%">
  </div>
  <!--end of logo-->
  <!--start of introduction1-->
  <div class="introduction1">
    <p>
      Lorem ipsum dolor sit amet, facilisi similique ex duo. Id qui dico nostrud pericula, usu nemore tractatos mediocritatem id.
    </p>
  </div>
  <!--end of introduction1-->
  <!--start of image-->
  <div class="mainimage">
    <img src="http://www.clker.com/cliparts/a/2/Y/Q/y/8/mustache-no-background.svg" height="100%" width="100%">
  </div>
  <div class="boxextension">
  </div>
  <!--end of image-->
  <!--start of introduction2-->
  <!--start of h2-->
  <div class="h2">
    <h2>Lorem</h2> 
  </div>
  <!--end of h2-->
  <div class="introduction2">
    <p>
      Lorem ipsum dolor sit amet, facilisi similique ex duo. Id qui dico nostrud pericula, usu nemore tractatos mediocritatem id. Eum mazim utamur at, eu stet atqui eligendi nec. Ut vel cibo iriure.
    </p>
    <p>
      Lorem ipsum dolor sit amet, facilisi similique ex duo. Id qui dico nostrud pericula,
    </p>
  </div>
  <!--end of introduction2-->
  <!--start of infotable-->
  <div class="infotable">
    <ul>
      <table>
        <tr>
          <td>1</td>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>5</td>
          <td>6</td>
        </tr>
        <tr>
          <td>7</td>
          <td>8</td>
        </tr>
      </table>
    </ul>
  </div>
  <!--end of infotable1-->
  <!--start of introduction 3-->
  <!--start of h3-->
  <div class="h3">
    <h2>Lorem</h2>
  </div>
  <!--end of h3-->
  <div class="introduction3">
    <p>
      Lorem ipsum dolor sit amet, facilisi similique ex duo. Id qui dico nostrud pericula, usu nemore tractatos mediocritatem id. Eum mazim utamur at, eu stet atqui eligendi nec. Ut vel cibo iriure.
    </p>
  </div>
  <!--end of introduction 3-->
  <!--start of introduction 4-->
  <!--start of h4-->
  <div class="h4">
    <h2>Ipsum</h2>
  </div>
  <!--end of h4-->
  <div class="introduction4">
    <P>
      Lorem ipsum dolor sit amet, facilisi similique ex duo. Id qui dico nostrud pericula, usu nemore tractatos mediocritatem id. Eum mazim utamur at, eu stet atqui eligendi nec. Ut vel cibo iriure. Illud delenit adipisci mea in. Quo et aperiam temporibus consequuntur,
      sit ne quem eirmod pertinax.Lorem ipsum dolor sit amet,
    </p>
  </div>
  <!--end of introduction 4-->
  <!--startof h5-->
  <div class="h5">
    <h2>Dolor</h2>
  </div>
  <!--end of h6-->
  <!--start of introduction 6-->
  <div class="introduction5">
    <p>
      Lorem ipsum dolor sit amet, facilisi similique ex duo. Id qui dico nostrud pericula, usu nemore tractatos mediocritatem id. Eum mazim utamur at, eu stet atqui eligendi nec. Ut vel cibo iriure. Illud delenit adipisci mea in. Quo et aperiam temporibus consequuntur,
      sit ne quem eirmod pertinax.Lorem ipsum dolor sit amet,
    </p>
  </div>
  <!--end of introduction 6-->
  <!--start of menu-->
  <div class="menu">
    <select onchange="window.location.href=this.value">
      <option value="#">Lorem</option>
      <option value="https://www.youtube.com/">Ipsum</option>
      <option value="#">Dolor</option>
    </select>
  </div>
  <!--end of menu-->
  <!--start of footer-->
  <div class="footer">
    <div class="container">
      <p>&copy; blahblah 2015</p>
    </div>
  </div>
  <!--end of footer-->
</body>

</html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我认为你应该选择像bootstrap这样的东西。它将管理大多数响应式事物，而不是编写太多media queries和css。

如果使用bootstrap无法管理任何事情，请针对该特定情况编写media queries。

Answer 2

使用media queries和％width / height为您的网站提供流畅的响应式布局。

示例：

@media (min-width: 992px) { <!-- Desktop -->
    .menu {
        position: absolute;
        top: 20%;
        left: 5%;
    }
}

@media (max-width: 480px) { <!--Mobile-->
    .menu {
        position: absolute;
        top: 10%;
        left: 2%;
    }
}

Answer 3

要添加到Andrew Laydem的答案，请记住浏览器以顺序方式处理媒体查询。这意味着如果第二个媒体查询符合条件，它也将被处理。例如：

.menu { /* Mobile */
    position: absolute;
    top: 0;
    left: 0;
}

@media (min-width: 640px) { /* Tablet */
    .menu {
        position: absolute;
        top: 10%;
        left: 2%;
    }
}

@media (min-width: 992px) { /* Desktop */
    .menu {
        position: absolute;
        top: 20%;
        left: 5%;
    }
}

在上面的示例中，如果当前屏幕宽度为1440px，则每组规则将相互应用（因此排除前一个规则。）但如果分辨率为800px，则只处理前两个（并且第二个将保持有效。（纠正评论应该用CSS写的方式）

当你使用像这个升序的min-width查询时，它通常被称为Mobile-first结构，因为你在媒体查询之外编写的CSS代码是移动的 - 分辨率最低。

您也可以反向编写 - 桌面 - 结构 - 使用max-width：

.menu { /* Desktop - Anything above 1440 */
    position: absolute;
    top: 20%;
    left: 5%;
}

@media (max-width: 1440px) { /* Tablet - 1440 to 640 */
    .menu {
        position: absolute;
        top: 10%;
        left: 2%;
    }
}

@media (max-width: 640px) { /* Mobile - Anything below 640 */
    .menu {
        position: absolute;
        top: 0;
        left: 0;
    }
}