麻烦适合我的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;