html - 无法使我的 CSS 适合所有尺寸的电脑屏幕

Question

我在我的电脑上创建了一个网站，但是当我将它加载到我的笔记本电脑上时，我发现所有内容的尺寸都没有了。但是，它在我的电脑上看起来仍然不错。我知道这可能是在 css 中学到的一个很好的教训，但目前你们认为你们中的任何人都可以看一下我的 css 文件吗？

#cool_animate {
  border-top: 10px solid gray;
  border-bottom: 4px solid gray;
  height: 195px;
  background: url(images/scape.png) repeat-x;
  -webkit-animation: move-city 15s infinite linear;
}

@-webkit-keyframes move-city {

  0%    { background-position: 0 0;}
  100%  { background-position: -256px 0;}
}

#boat {
  height: 239px;
  position: absolute;
  top: -10px;
  left: 200px;
  -webkit-animation: wind 300s infinite linear;
}

@-webkit-keyframes wind {

  from  { left: 400px}
  to    { left: 1400px}
}

@-webkit-keyframes cloud {

  from  { left: 260px}
  to    { left: 280px}
}

#cloud {
  height: 90px;
  position: absolute;
  top: 28px;
  left: 300px;
  -webkit-animation: cloud 9s infinite alternate linear;
}

#copter {
  height: 90px;
  position: absolute;
  top: 28px;
  left: 1700px;
  -webkit-animation: copter 15s infinite alternate linear;
}

@-webkit-keyframes copter {

  from  { left: 1700px}
  to    { left: 1600px}
}

header {
  font-size: 22px;
  color: white;
  background: linear-gradient(#C7E2EE, #0099CC);
  font-family: 'Lobster', cursive;
  box-shadow: 5px 5px 3px 4px gray;
  border-radius: 10px; /* this makes it rounded */
  padding: 40px 40px;
  border: 1px black solid;
  border-width: 1px 1px 1px 1px;
  border-color: black;
  margin: 50px 470px;
  margin-bottom:0px;
  height: 200px;
}

img.right {
 position: relative;
 top: -16px;
 right: -200px;
}

#inside_p {
  display:inline;
}

#cool_nav {
  margin: 190px 160px 40px 140px;
  font-family: 'Lobster', cursive;
  color: black;
  position: absolute;
  z-index: 7;
  left: 0;
  width: 204px;
  top: 72px;
  font-size: 24px;
  line-height: 1.2;
}

#facts_nav {
  background-color: rgb(211, 211, 211);
  margin: 700px 160px 40px 180px;
  color: black;
  position: absolute;
  z-index: 7;
  left: 0;
  width: 204px;
  top: 72px;
  font-size: 17px;
  line-height: 1.2;
  border: 1px black solid;
  border-width: 1px 1px 1px 1px;
  border-color: black;
  border-radius: 10px;
  padding: 26px 20px;
}

body {
  background: linear-gradient(#69D1FF, white);
}

#cool_nav p {
  background-color: #30C722;
  border-radius: 7px;
}

#cool_nav p:hover {
  background-color: #3DB0E6;
  color: #ffffff;
  width: 160px;
  border-radius: 30px;
}

ul  {
  list-style-type: none;
}

#example li:hover {
  background-color: #82C0DB;
}

#toot li:hover {
  background-color: #82C0DB;
}

#intro li:hover {
  background-color: #82C0DB;
}

#main_content {
  font-size: 0px;
  color: black;
  background-color: rgb(255, 209, 124);
  font-family: 'Lobster', cursive;
  border-radius: 10px; /* this makes it rounded */
  padding: 1px 40px;
  border: .5px black solid;
  border-width: 1px 1px 1px 1px;
  border-color: black;
  margin: 50px 470px;
  margin-top:.5px;
  margin-bottom: 0;
  height: 400px;
}

#cool_div {
  font-size: 19px;
  color: white;
  background-color: rgb(255, 113, 255);
  font-family: 'Lobster', cursive;
  box-shadow: 5px 5px 3px 4px #999;
  border-radius: 10px; /* this makes it rounded */
  padding: 1px 40px;
  border: .5px black solid;
  border-width: 1px 1px 1px 1px;
  border-color: black;
  margin: 50px 470px;
  margin-top: 0px;
  height: 200px;
  margin-bottom: 0
}

#fun_times:hover {
 content: url('images/batman.jpg');
 height: 140px;
 width: 150px;
}

#cool_footer {
  font-size: 22px;
  color: white;
  background-color: rgb(74, 255, 74);
  font-family: 'Lobster', cursive;
  box-shadow: 5px 5px 3px 4px #999;
  border-radius: 10px; /* this makes it rounded */
  padding: 1px 40px;
  border: .5px black solid;
  border-width: 1px 1px 1px 1px;
  border-color: black;
  margin: 50px 470px;
  margin-top: 0px;
  top-margin: 0px;
  height: 200px;
}

a:link {
  -webkit-transition: .2s;
  transition: .2s;
}

a:hover {
  color: hsl(209, 100%, 32%);
}

.btn {
 -moz-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
 -webkit-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
 box-shadow:inset 0px 1px 0px 0px #ffe0b5;

 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fbb450), color-stop(1, #f89306));
 background:-moz-linear-gradient(top, #fbb450 5%, #f89306 100%);
 background:-webkit-linear-gradient(top, #fbb450 5%, #f89306 100%);
 background:-o-linear-gradient(top, #fbb450 5%, #f89306 100%);
 background:-ms-linear-gradient(top, #fbb450 5%, #f89306 100%);
 background:linear-gradient(to bottom, #fbb450 5%, #f89306 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89306',GradientType=0);

 background-color:#fbb450;

 -moz-border-radius:7px;
 -webkit-border-radius:7px;
 border-radius:7px;

 border:1px solid #c97e1c;

 display:inline-block;
 color:#ffffff;
 font-family:Trebuchet MS;
 font-size:17px;
 font-weight:bold;
 padding:6px 11px;
 text-decoration:none;

 text-shadow:0px 1px 0px #8f7f24;

}
.btn:hover {

  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f89306), color-stop(1, #fbb450));
  background:-moz-linear-gradient(top, #f89306 5%, #fbb450 100%);
  background:-webkit-linear-gradient(top, #f89306 5%, #fbb450 100%);
  background:-o-linear-gradient(top, #f89306 5%, #fbb450 100%);
  background:-ms-linear-gradient(top, #f89306 5%, #fbb450 100%);
  background:linear-gradient(to bottom, #f89306 5%, #fbb450 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f89306', endColorstr='#fbb450',GradientType=0);

  background-color:#f89306;
}
.btn:active {
  position:relative;
  top:1px;
}
}

不确定这是否真的重要，但这是我的 html 文件

<!DOCTYPE html>

<html>

    <!-- this is the start of my head -->
    <head>
        <title>Rails Tutorial</title>

        <!-- js and css sheets -->
        <script src="cool.js"></script>
        <script src="jquery.js"></script>
        <link href="cool.css" rel="stylesheet">
        <link href="animate.css" rel="stylesheet">

        <!-- my favicon for top of page -->
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
        <link rel="icon" href="images/favicon.ico" type="image/x-icon" title="A super fun rails tutorial">

             <!--[if lt IE 9]>
            <script src="dist/html5shiv.js"></script>
            <![endif]-->
            <!-- HEADER -->

        <div>
            <h1 id="cool_animate"></h1>
            <img src="images/cool.png" id="boat">
            <img src="images/cloud.png" id="cloud">
            <img src="images/copter.png" id="copter">
        </div>
    </head>
    <!-- this is the end of my head -->

    <body>

        <!-- this is the start of my header -->
        <header class="animated swing">
            <div <div style="width:200px; float:left;">
                <img src="images/study.png " width="140" height="120" title="LEARNING IS FUN!">
            </div>
            <h1 id="cool_h1">Welcome aboard!</h1>
            <p>This is a simple tutorial site to help you learn and get more confortable with programming in Rails. I made this for people who are just getting started and are considering learning how to program.</p>
        </header>
        <!-- this is the end of my header -->
        <!-- this is the start of my link nav -->
        <nav id="cool_nav" class="animated tada">
            <ul>
                <li id="toot">
                    <p>tutorial</p>
                    <ul>
                        <li>level one</li>
                        <li>level two</li>
                        <li>level three</li>
                    </ul>
                </li>
                <li id="intro">
                    <p>Introduction</p>
                    <ul>
                        <li>about Ruby</li>
                        <li>about Rails</li>
                        <li>about Erb</li>
                    </ul>
                </li>
                <li id="example">
                    <p>Examples</p>
                    <ul>
                        <li>example 1</li>
                        <li>example 2</li>
                        <li>example 3</li>
                    </ul>
                </li>
            </ul>
        </nav>
        <!-- this is the end of my nav -->

        <!-- this is the start of fun facts nav -->
        <nav id="facts_nav">
            <code>
            <p>what does MVC stand for?</p>
            <p>many view controller</p>
            <p>model view controller</p>
            <p>method via controller</p>
            <button>show answer</button>
            <div style="display: none">
                <p>model view controller</p>
            </div>
            </code>
        </nav>

            <script>
            $( "button" ).click(function() {
              $( "div" ).show( "slow" );
            });
            </script>
        <!-- this is the end of my fun facts nav -->

        <!-- this is the start of my main section -->
        <section id="main_content" class="animated shake">
            <button id="go" class="btn">Table of contents</button>
            <div id="block">
            <h1>1: Tutorial</h1>
            <p>The rails tutorial that I made has 3 levels and each level has its own set of challenges.</p>
            <h2>2: Introduction</h2>
            <p>this introduction will tell you about ruby a programming language, rails the
            platform that is build off of ruby, and about Embedded Ruby in our html.</p>
            <h2>3: Examles</h2>
            <p>Here I will give you three examples of working rails programs that I built.</p>
            </div>
        </section>
        <!-- this is the end of my main section -->

        <script>
            $( "#go" ).click(function() {
                $( "#block" ).animate({
                    // width: "70%",
                    // opacity: 0.4,
                    marginLeft: "30px",
                    fontSize: "17px",
                    borderWidth: "4px"
                }, 1500 );
            });
        </script>

        <!-- this is the start of cool div -->
        <div id="cool_div">
            <div>
                <p></p>
            </div>
            <div <div style="width:200px; float:left;">
                <a href="http://cheatermoves.github.io/" id="fun_times">
                <img src="images/me.jpg" width="150" height="140">
                </a>
            </div>

            <div style="width:400px; float:left;">
                <p class="speech">Click on my photo to view my website or follow me on twitter. Always looking forward to sharing new tweets.</p>
            </div>
            <div style="width:150px; float:right;">
                <a href="https://twitter.com/lanners_cool">
                <img src="https://si0.twimg.com/profile_images/2284174758/v65oai7fxn47qv9nectx.png" width="140" height="120">
                </a>
            </div>
        </div>
        <!-- this is the end of cool div -->

        <!-- this is the start of cool footer -->
        <footer id="cool_footer">
            <p>Here are some helpful links to help you learn rails</p>
            <ul>
                <li><small><a href="http://ruby.railstutorial.org/">Hartl tutorial</a></small</li>
                <li><small><a href="http://guides.rubyonrails.org/getting_started.html">Getting started with rails</a></small></li>
                <li><small><a href="http://railscasts.com/episodes/310-getting-started-with-rails">Rails Casts intro video</a></small></li>
            </ul>

        </footer>
        <!-- this is the end of cool footer -->
    </body>
</html>

Answer 1

问题与元素的大小有关。

将宽度和高度设置为百分比。以及您的“左”和“上”。这样，您的布局就会变得响应式。

将您的字体大小设置为 ems。例如:

font: 1em helvetica, arial, sans-serif;