我的网页缩小了，我认为CSS中的问题

Question

请建议我或编辑此代码。我正在寻找并试图解决问题。当我最大化或恢复它时，我的页面会缩小。请看我的CSS代码。我不允许使用像bootstrap这样的任何框架。我在这里粘贴我的小提琴代码。如果可能请更正。

CSS代码

#container {
    height: 400px;
    position: relative;
    margin: 0 auto;
    width: 80%;
    display:block;
}


.container-1 input#search{
    width: 30%;
    height: 40%;
    background:gray;
    border: none;
    font-size: 12pt;
    float: right;
    display:block;
    padding-right: 100%;


}


.form-wrapper {

    padding: 15px;
    position: absolute;
    top:10%;
    right: 50px;
    background:grey;

}

#image {
    position: absolute;
    left: 0;
    top: 0;
}
#text {
    position: absolute;
    color: white;
    text-align: center;
    width: 45em;
    word-wrap: break-word;
    font-size:25px;
    left: 150px;
    top: 600px;
    font-family: "Trebuchet MS";
}

#about {
    position: absolute;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size:44px;
    left: 550px;
    top: 520px;
    font-family: "Trebuchet MS";
}


#con {
    position: absolute;
    color: white;
    font-size:44px;
    font-weight: bold;
    left: 250px;
    top: 550px;
    font-family: "Trebuchet MS";
}


#project {
    position: absolute;
    color: white;
    text-align: center;
    margin-left: 100px;
    font-size:44px;
    font-weight: bold;
    top: 500px;
    font-family: "Trebuchet MS";
}

#projectp {
    position: absolute;
    color: white;
    text-align: center;
    margin-left: 300px;
    font-size:30px;
    font-weight: bold;
    top: 600px;
    font-family: "Trebuchet MS";
}

#projectpc {
    width: 40em;
    word-wrap: break-word;
    text-align: center;
    font-size:30px;
    font-family: "Trebuchet MS";
}
#p{
    text-align: center;
    font-size:30px;
    font-family: "Trebuchet MS";
    font-style: italic;


}

#pr{
    text-align: center;
    font-size:40px;
    font-family: "Trebuchet MS";
    font-weight: bold;
    border: 2px solid #000000;
    border-width: medium;
    margin-left: 500px;
    margin-right: 500px;


}

div.img {
    margin: 65px;
    float: left;
    width: 180px;
}


div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    text-align: center;
    font-size: 30px;
    font-family: "Trebuchet MS";
    font-weight: bold;
}




#contact {
    position: absolute;
    color: white;
    text-align: center;
    font-size:44px;
    left: 570px;
    top: 480px;
}

#contact1 {
    position: absolute;
    color: white;
    text-align: center;
    width: 15em;
    word-wrap: break-word;
    font-size:30px;
    left: 520px;
    top: 560px;
}


h1,h2,h3,h4,h5,h6,p{
    font-family: "Trebuchet MS";
}
h1 {
    text-align: center;
    font-size:44px ;
    display:block;
}
h2 {
    text-align: center;
    font-size:30px;
    display:block;
    font-weight: bold;
}


#left {
    color: rgba(16, 9, 18, 0.57);
    position: absolute;
    top: 1500px;
    font-family:Trebuchet MS
    color: white;
    text-align: center;
    width: 23em;
    word-wrap: break-word;
    font-size:20px;
    display:block;

}


p.ex {
    height: 100px;
    width: 100px;
    font-family:Trebuchet MS;
    display:block;
}

h3{
    text-align:center;
    display:block;
}


h4{
    text-align:center;
    display:block;
    font-size:20px;
}





#img_cont a {
    display: table-cell;
    text-align: center;
    width: 26%;
}


#imagepr {
    margin-top: 100px;
    margin-left: 250px;
}
#image1 {
    padding-top: 100px;
    padding-left: 520px;
    height:40px;
}

#image2 {
    margin-right:10px;
    margin-left:52px;
    height:40px;
}

#image3 {
    margin-right:10px;
    margin-left:52px;
    height:40px;

}
#image4 {
    margin-right:10px;
    margin-left:52px;
    height:40px;

}

h3 {
    position: absolute;
    left: 800px;
    top: 1880px;
    display:block;
}


.heading{float:right;
    width: 16em;
    word-wrap: break-word;}

.heading1{float:right;
    width: 22em;
    word-wrap: break-word;
    margin-top: -200px;

}

#image24 {
    margin-right:10px;
    margin-left:72px;


}
 h2.pos_left {
     color: rgba(16, 9, 18, 0.57);
     position: absolute;
     top: 1450px;
    margin-left: 100px;

 }




  h2.pos_right {
      word-wrap: break-word;
      color:rgba(16, 9, 18, 0.57);
      position: absolute;
      left: 670px;
      top: 1450px;
      display:block;
      margin-left:150px;
  }
#right {
    color: rgba(16, 9, 18, 0.57);
    position: absolute;
    top: 1530px;
    font-family:Trebuchet MS
    color: white;
    text-align: center;
    width: 23em;
    word-wrap: break-word;
    font-size:20px;
    display:block;
    margin-left:680px;

}


footer {
    height: 150px;
    font-size: 18px;


}  footer a {
       color: #100912;
       text-decoration: none;
   }


#footer ul {
    text-align: center;




}
#footer li {
    list-style-type: none;
    display: inline-block;
    color: #18210b;



}

HTML代码

<!DOCTYPE html>

<head>


    <meta charset="utf-8">
    <title>DROPS and Crops</title>



    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="viewport" content="width=device-width"/>


    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/menu.css">
    <link rel="stylesheet" href="css/responsiveslides.css">
    <script src="js/jquery183.min.js"></script>
    <script src="js/responsiveslides.min.js"></script>
    <script>

        $(function () {
          // Slideshow
          $("#slider").responsiveSlides({
            auto: true,
            pager: false,
            nav: true,
            speed: 500,
            namespace: "callbacks",
            before: function () {
              $('.events').append("<li>before event fired.</li>");
            },
            after: function () {
              $('.events').append("<li>after event fired.</li>");
            }
          });
        });
    </script>

</head>
<body>
<div class="wrap-body">

<!--////////////////////////////////////Header-->
<header>
    <div class="">
        <div class="wrap-header">
            <div class="row">
                <div class="col-1-3">
                    <div class="wrap-col">
                        <div class="logo"><a href="#"><img src="images/drops.jpg" alt="" /></a></div>
                    </div>
                </div>
                </div>
            </div>
        </div>
</header>
                <div class="col-1-3 offset-1-3">
                    <div class="wrap-col">
                        <form class="form-wrapper cf" >
                            <input type="text" placeholder="Search here..." required>


                    </form>
                    </div>
                </div>
            </div>

        <div>
            <nav id="menu-wrap"><div id="menu-trigger">Menu</div>
            <ul id="menu" style="display: none;">
                <li><a href="index.html">Home</a></li>
                <li>
                    <a href="index.html">About</a>

                </li>
                <li><a href="single.html">Projects</a></li>
                <li><a href="single.html">Blog</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
</div>
</body>


        <div class="slider">

            <div class="callbacks_container">
                <ul class="rslides" id="slider">
                    <li>
                        <div style="text-align: center"><img src="images/1.jpg" width="100" height="100" alt="image"/></div>

                        <p id="text">
                            In 2050, we are projected to have 9 billion on this planet. These people will eat and drink just like we do..
                        requiring a doubling of food production. But food and water security already are the largest challenges for a

                                           thriving global population.





                            Drops and Crops is a network of students, researchers, social innovators and entrepreneurs trying to tackle this
                             great challenge of our lifetimes through partnerships and collaborations. Our network is supported by the Water


                                                   for Food Institute at the University of Nebraska.
                        </p>


                    </li>

                </ul>
            </div>
        </div>





        <h1>LEARN MORE</h1>

<h2>about our current<a href="single.html"> Projects</a> </h2>


    <!--////////////////////////////////////Project Section-->

<div id="header">
    <img id="imag23" src="images/banner-img1.jpg"alt="img"  >
    <img id="imag24" src="images/banner-img2.jpg"alt="img" >

</div>

<div>
    <h2 class="pos_left"> SYRIAN CRISIS </h2>
    <p id="left"> We are organizing a conference in April 2016 on
     water and humanitarian aspects of the Syrian crisis.
     Click <a href="projectc.html">here</a> to learn about the crisis and our
     conference.</p>
    </div>

<div>
<h2 class="pos_right">SMALLHOLDER </br> AGRICULTURE</h2>
<p id="right">We are organizing a workshop in April 2016 on smallholder irrigation in Sub-Saharan Africa. Click here
 to learn about the challenge of agriculture in the
region and our workshop.</p>
    </div>
<div>

<h1> Latest From Our <a href="single.html">Blog</a></h1>
</div>

<div>
    <!--////////////////////////////////////Footer-->


    <img src="images/2.jpg" class="myImage" alt="images/2"/>
    <h2 class="heading">HOW MUCH DO YOU KNOW ABOUT THE WORLD'S BIGGEST  HUMANITARIAN CRISIS?  </h2>


    <h4 class="heading1">Click here to see our more recent infographic on humanitarian aspects of the Syrian crisis </h4>





    </div>





<!--////////////////////////////////////Social Media-->
<a href="https://www.facebook.com/Drops-and-Crops-705675629533002/?fref=ts" target="_blank"><img id="image1" src="http://waterforfood.nebraska.edu/wp-content/uploads/2013/07/facebook.png" alt="image"></a>
<a href="https://twitter.com/drops_and_crops" target="_blank"><img id="image2" src="http://waterforfood.nebraska.edu/wp-content/uploads/2013/07/twitter.png" alt="image"></a>
<a href="https://www.pinterest.com/DropsandCrops/" target="_blank"><img id="image3" src="http://waterforfood.nebraska.edu/wp-content/uploads/2014/01/pinterest.png" alt="image"></a>
<a href="https://www.linkedin.com/company/water-for-food-institute-at-university-of-nebraska" target="_blank"><img id="image4" src="http://waterforfood.nebraska.edu/wp-content/uploads/2015/07/linkedin.png" alt="image"></a>

<!--   Footer          -->




<footer>
    <div id="footer">

        <ul class="footer" id="footersection">
            <li><a href="#">ABOUT US | </a></li>

            <li><a href="#">CREDITS | </a></li>

            <li><a href="#">waterforfood.nebraska.edu  </a></li>


        </ul>
    </div>

</footer>

https://jsfiddle.net/bsp27L9s/3/

Answer 1

@ j08691他是对的！使用网格系统可能引导？或者很好，或者那里有很多，如果你处于学习模式，我建议你从youtube开始关于css教程和最佳实践