Question

如何让我的网站响应任何设备/任何分辨率？这是我的第一个网站，所以我真的没有太多的知识和经验。

modernizer可以帮我轻松完成吗？这是最简单，最有效的方法吗？我尝试在720p显示屏和手机上加载我的网站，看起来很糟糕。

＆＃13;

html {
  box-sizing: border-box;
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-family: Roboto, Arial;
  height: 4000px;
  width: 100%;
  padding-bottom: 6rem;
  margin: 0;
  font-size: 1.1em;
  min-height: 100%;
  position: relative;
}

header {
  color: #ffffff;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #ADADAD;
}

#container {
  margin: 0 auto;
  padding: 0;
  color: #ffffff;
}

#top-mic {
  background-color: #F28A00;
  margin: 0;
  padding: 0;
  margin-bottom: 14px;
}

#top-mic ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#top-mic li {
  float: right;
  padding: 8px 30px;
}

#top-mic li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  text-align: center;
  font-size: 0.6em;
  font-weight: bold;
  transition: color 0.25s ease;
  margin-right: 55px;
}

#top-mic li a:hover {
  color: #ADADAD;
}

#logo {
  float: left;
  margin-left: 240px;
  margin-right: 130px;
}

#top-mare-wrap {
  margin: 0 auto;
}

#top-mare {
  padding: 0;
  margin: 0;
  margin-bottom: 60px;
}

#top-mare ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#top-mare li {
  display: inline;
}

#top-mare li a {
  margin-top: 42px;
  margin-left: 40px;
  padding-right: 20px;
  display: inline-block;
  text-decoration: none;
  color: #ADADAD;
  text-align: center;
  font-size: 2.1em;
  font-weight: bold;
  transition: color 0.25s ease;
}

#top-mare li a:hover {
  color: #F28A00;
}

#test {
  color: black;
}

#container {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px;
}

#container:after {
  content: "";
  display: block;
}

.site-footer,
.page-wrap:after {
  height: 142px;
}

.site-footer {
  background: orange;
}

.footer {
  clear: both;
  margin-top: 4000px;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #F28A00;
  text-align: center;
}

＆＃13;

<!DOCTYPE html>
<html lang="en-us" class="no-js">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>x</title>
  <link href="css/css.css" rel="stylesheet" />
  <link href="css/sshow.css" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<body>
  <div id="container">
    <div class="shadow">
      <header id="top">
        <nav id="top-mic">
          <ul>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Despre noi</a></li>
            <li><a href="#">Locatie</a></li>
          </ul>
        </nav>
        <a href="#"><img src="img/logo.jpg" alt="davnic" id="logo" width="288" height="115"></img>
        </a>
        <div id="top-mare-wrap">
          <nav id="top-mare">
            <ul>
              <li><a href="#">Acasa</a></li>
              <li><a href="#">Buton1</a></li>
              <li><a href="#">Buton2</a></li>
              <li><a href="#">Buton3</a></li>
              <li><a href="#">Buton4</a></li>
            </ul>
          </nav>
        </div>
      </header>
    </div>

    <div class="slideshow-container">

      <div class="mySlides fade">
        <div class="numbertext">1 / 3</div>
        <img src="img/img1.jpg" style="width:100%">
      </div>

      <div class="mySlides fade">
        <div class="numbertext">2 / 3</div>
        <img src="img/img2.jpg" style="width:100%">
      </div>

      <div class="mySlides fade">
        <div class="numbertext">3 / 3</div>
        <img src="img/img3.jpg" style="width:100%">
      </div>
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>

      <script src="js/sshow.js"></script>

      <footer class="site-footer">
        x
        <img src="img/location_1.png" />
      </footer>
    </div>
</body>

</html>

＆＃13;

第一个网页完成 - 仅在我的1080p显示器上看起来很好 - 对其他人来说很可怕

0 个答案: