如何使我的网站更适合大屏幕？

Question

所以，我有一段时间一直在编写网站代码，但今天我偶然发现了一个页面问题。在我以前的设计中，它适用于许多不同的尺寸，但不适用于这个。任何人都知道一种方法可以让我获得更合适的设计，使其也适用于更大的屏幕？

/* Linked with index.html */

/* All elements having a color:red in the same element as a rgba color, the color:red is only used for fallbacks for older/browsers not supporting rgba. */

@import url(http://fonts.googleapis.com/css?family=Titillium+Web);
 html,
body {
  background-color: #262626;
  font-family: 'Titillium Web', sans-serif;
  background-repeat: repeat-x;
  width: auto;
  min-width: 1000px;
}
.backtocv {
  margin-left: 30px;
}
h1 {
  margin-left: 15px;
  margin-right: 15px;
}
h2 {
  margin-left: 15px;
  margin-right: 15px;
}
h3 {
  margin-left: 15px;
  margin-right: 15px;
}
p {
  margin-left: 15px;
  margin-right: 15px;
  max-width: 750px;
  width: auto;
  height: auto;
}
.overlay {
  background-color: rgb(0, 0, 0);
  /* Fall-back for browsers not supporting RGBA */
  background-color: rgba(0, 0, 0, 0.7);
  border: 6px solid rgba(30, 30, 30, 0.8);
  border: 6px solid rgb(30, 30, 30);
  /* Fall-back for browsers not supporting RGBA */
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  min-width: 515px;
  width: auto;
}
.toptitle {
  color: black;
  background: -webkit-linear-gradient(#8F0000, #720000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  '

}
.toptitlename {
  color: white;
}
.toptitlenameparent {
  background-color: red;
  background: -webkit-linear-gradient(#8F0000, #720000);
  margin-top: -10px;
  padding-left: 15px;
}
.toptitleparent {
  background-color: white;
  margin-top: -10px;
  padding-left: 15px;
}
.swedishflag {
  margin-left: 5px;
}
.ukflag {
  width: auto;
  height: auto;
  max-width: 30px;
  max-height: 30px;
  margin-left: 10px;
}
.placeholder {
  background: -webkit-linear-gradient(#8F0000, #720000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  '

}
.copyright {
  font-size: 11px;
  text-align: bottom;
  color: white;
}
.normalhr {
  margin-left: 0%;
  width: 70%;
  size: 1%;
}
.facebook {
  width: auto;
  height: auto;
  max-width: 30px;
  max-height: 30px;
  margin-left: 30px;
}
.twitter {
  width: auto;
  height: auto;
  max-width: 30px;
  max-height: 30px;
  margin-left: 7px;
}
.newslist {
  text-decoration: none;
  margin-left: 1017px;
  list-style-type: none;
  color: white;
  width: auto;
  max-width: 950px;
}
.externallist {
  color: white;
  text-decoration: none;
  list-style-type: none;
  width: auto;
  max-width: 950px;
  margin-left: 550px;
}
.leftpic {
  display: block;
  max-width: 300px;
  max-height: 300px;
  height: auto;
  width: auto;
  margin-left: 50px;
  margin-top: -100px;
  border: 1px solid white;
}
.newsheader {
  color: red;
  right: -1130px;
  position: relative;
  background: -webkit-linear-gradient(#8F0000, #720000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  '

}
a:link {
  text-decoration: none;
  color: white;
}
a:visited {
  text-decoration: none;
  color: white;
}
a:hover {
  text-decoration: none;
  color: white;
}
a:active {
  text-decoration: none;
  color: white;
}
.externalheader {
  color: red;
  margin-top: -110px;
  margin-left: 590px;
  background: -webkit-linear-gradient(#8F0000, #720000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  '

}
.afterinfobar {
  margin-top: -1px;
}
.abouttitle {
  color: red;
  background: -webkit-linear-gradient(#8F0000, #720000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  '

}
.aboutinfo {
  color: white;
  width: auto;
  max-width: 750px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link href="indexstyle.css" rel="stylesheet" type="text/css">
  <title>Johannes Sundqvist | Index</title>
</head>

<body>

  <!-- Start of language switch and social bar -->
  <a href="index.html">
    <img class="ukflag" src="http://icons.iconarchive.com/icons/custom-icon-design/flag-3/256/United-Kingdom-flag-icon.png" alt="English (UK)">
  </a>

  <a href="indexsv.html">
    <img class="swedishflag" src="http://www.eurovision.tv/img/upload/flags/medium/Sweden.png" alt="Swedish">
  </a>

  <a href="https://www.facebook.com/johannes.sundqvist.9">
    <img class="facebook" src="http://international.olemiss.edu/wp-content/uploads/sites/23/2014/01/facebook-logo-transparent.png" alt="Facebook">
  </a>

  <a href="http://twitter.com/TheXariez">
    <img class="twitter" src="https://g.twimg.com/Twitter_logo_blue.png" alt="Twitter">
  </a>

  <!-- End of language switch and social bar -->
  <!-- Start of top header and body -->
  <div class="toptitlenameparent">
    <h2 class="toptitlename"> Johannes Sundqvist </h2>
  </div>

  <!-- Start of overlay -->
  <div class="overlay">

    <div id="rightnews">
      <h1 class="newsheader"> News </h3>
                <div class="frontpagelists">
                        <ul>
                                <li class="newslist"> Internet CV Created - View <a href="cv.html"><span style="color:#8F0000">here</span></a> (clickable)      </li>
                        </ul>
               
                        <h1 class="externalheader"> External Links </h1>

      <ul>
        <li class="externallist"><a href="cv.html">Internet CV (Curriculum Vitae) (clickable)</a>
        </li>
        <li class="externallist"><a href="http://jsundqvist.optipoint.fi/blog/">IT Blog (Swedish only, clickable)</a>
        </li>
      </ul>
    </div>
  </div>

  <img class="leftpic" src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/10406823_10201587226402089_720379364643065326_n.jpg?oh=6110f5e2e100a383cb32745fc5aa492c&oe=55599AE6&__gda__=1432453081_e9db450a88b424d8d5d5287e19868609">

  <hr class="afterinfobar">

  <h3 class="abouttitle"> About this site </h3>
  <p class="aboutinfo">This site was created using HTML and CSS, it is a site mainly created for a school task we got, but a very large part of it was also created just to pure enjoyment from me as the author. For you asking, Yes, That is me on the picture. But no, I will
    not be giving you my phone number for any weird reason.</p>

  <br>
  <hr>






  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>

  <!-- Copyright -->

  <p class="copyright">Copyright © Johannes Sundqvist | 2015</p>












  <!-- End of overlay and body -->
  </div>





























</body>

</html>

Answer 1

http://getbootstrap.com/ 是您的最佳选择。 bootstrap 具有最好的预定义 css 类，它将优化 div 文本图像以在 PC 和移动设备上工作。他们有很好的文档和示例来向您展示它是如何工作的。

如何使我的网站更适合大屏幕？

How to make my website more optimized for larger screens?

html

css

size

page-size