Question

我的主页有此html代码。该网站是wwww.chatziefraimidis.com。它在桌面浏览器中可以正常工作，但在移动设备中，页脚和页眉比屏幕小，而且更奇怪的是，仅在主页和其他页面上发生的代码与在桌面和移动浏览器上完全相同正确地。有人知道如何解决这个问题吗？

并且对应的CSS代码是

   body{
   font: 15px/1.5 "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
   padding: 0;
   margin:0;
   font-weight:normal;
   background: #f6f6f6;
}

/*Global*/
.container{
  width:90%;
  margin:auto;
  overflow:hidden;
}

header ul{
  margin:0;
  padding:0;
}

.button_1{
  height:32px;
  background:#7B68EE;
  border: 0;
  padding-left:20px;
  padding-right:20px;
  color:#ffffff;
}

.dark{
  padding:15px;
  background:#35424a;
  color:#ffffff;
  margin-top:10px;
  margin-bottom: 10px;
}

/*Header**/
header{
  background: #35424a;
  color:#ffffff;
  padding-top:20px;
  min-height: 70px;
  border-bottom:    #7B68EE 5px solid;
}

header a{
  color:#f4f4f4;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

header li{
  float:left;
  display:inline;
  padding: 0 16px 0 16px;
}

header #branding{
  float:left;
}

header #branding h1{
  margin:0;
}

header nav{
  float:right;
  margin-top: 15px;
}

header .highlight, header .current a{
  color:#7B68EE;
  font-weight:normal;
}

header .current2 a{
  color:#000000;
  font-weight:normal;
}


header a:hover{
  color:#cccccc;
  font-weight: bold;
}

/* showcase*/
#showcase{
  min-height:600px;
  min-width:500px;
  background:url('../img/showcase.png') no-repeat 0 -100px ;
  background-position: center;
  background-size:100%;
  text-align:center;
  color: #ffffff;
}

#showcase h1{
  margin-top:100px;
  font-size:50px;
  margin-bottom:10px;
  background: #35424a  ;
  opacity: 0.6;
}


  #showcase p{
    font-size:20px;
    background: #35424a ;
    opacity: 0.6;
  }

/*newsletter*/
  #newsletter{
    padding:15px;
    color:#ffffff;
    background:#35424a;
  }

  #newsletter h1{
    float:left;
   font-size:17px;
  }

  #newsletter form{
    float:right;
    margin-top:15px;
  }

  #newsletter input[type="email"]{
    padding:4px;
    height:25px;
    width: 250px;
  }

/*boxes*/
   #boxes{
     margin-top: 20px;
   }

   #boxes .box{
    float:left;
    text-align: center;
    width:33%;
    padding:10px;
   }

   #boxes .box img{
    width:30%;
   }

   /*side bar*/
  aside#sidebar{
  float:right;
  width: 30%;
  margin: 10px
  }
/*main cal*/

 article#main-col{
   float:left;
   width: 65%;
 }


/*projects*/
ul#services li{
  list-style: none;
  padding: 20px;
  boarder:#cccccc solid 1px;
  margin-bottom:5px;
  background:#e6e6e6;
}
div.gallery {

  border: 1px solid #ccc;
  float: left;
}

div.gallery:hover {
  border: 1px solid #777;
}

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

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 33%;
}

.row {
  margin: 8px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 8px;
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 33%;
}

/* Clear floats after rows */
.row:after {
  content: "";
  display: table;
  clear: both;
}



@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }

  .column {
    width: 49.9%;
    margin: 6px 0;
  }

}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
  .column {
     width: 100%;
   }

}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/*people*/
ul#people li{
  list-style: none;
  padding: 20px;
  boarder:#cccccc solid 1px;
  margin-bottom:5px;
  float: left;
  background:#e6e6e6;
}
ul#people img{
  float: left;
}

/*form*/
aside#sidebar .quote input, aside#sidebar .quote textarea {
width:90%;
padding: 5px;
}

  /*footer*/
    footer{
      padding:20px;
      margin-top:20px;
      color:#ffffff;
      background-color:#483D8B;
    /* text-align: center;*/
    }

    .column1 {
      float: left;
      width: 50%;
      margin-left:50px;

    }

    .column2 {
      float; top;
      float: right;
      width: 50%;
      margin-right:50px;
    }

    /* Clear floats after the columns */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }

    .fa {
    padding: 20px;
    font-size: 30px;

    text-align: center;
    text-decoration: none;
    margin: 2px 2px 2px 2px;
  }

  .fa:hover {
      opacity: 0.7;
  }

  .fa-facebook {
    background: #3B5998;
    color: white;
  }

  .fa-linkedin {
    background: #007bb5;
    color: white;
  }

  .fa-youtube {
    background: #bb0000;
    color: white;
  }

  .fa-instagram {
    background: #125688;
    color: white;
  }



  .fa-android {
    background: #a4c639;
    color: white;
  }


/*media quaeris*/
@media(max-width:768px){
 header #branding, header nav , header li , #newsletter h1, #newsletter form, #boxes .box,
 article#main-col, aside#sidebar
 {
   float:none;
   text-align:center;
    width:100%;
 }

 header {
 padding-bottom: 15px;
 }

 #showcase{
 background-size:768px;
 }

#showcase h1{
  margin-top:40px;
}

#newsletter button, .quote button{
  display: block;
  width: 100%;
}

#newsletter form input[type="email"], .quote input, .quote textarea{
  margin-bottom: 5px;
  width: 100%;
}
}

<header>
         <div class="container">
              <div id="branding">
                <h1><span class="highlight">Fasma</span> Engineers</h1>
              </div>
              <nav>
                <ul>
                  <li class="current"><a href="index.html">Home</a></li>
                  <li><a href="about.html">About</a></li>
                  <li><a href="projects.html">Projects</a></li>
                  <li><a href="people.html">People</a></li>
                  <li class="current2"><a href="index.html">|EN</a></li>
                  <li><a href="index-GR.html">GR|</a></li>
                </ul>
              </nav>
         </div>
    </header>

    <section id="showcase">
      <div class="container">
        <h1>World Class Structural And Geotechnical Engineers</h1>
        <p>Expienced With The Most Prestigious Projects</p>
      </div>
    </section>

    <section id= "newsletter">
      <div class="container">
        <h1>Subsctibe to our NewsLetter</h1>
        <form name="submit-to-google-sheet">
          <input type="email" name="email" placeholder="Enter Email">
          <button type="submit" class= "button_1">Subscribe</button>
        </form>
      </div>
    </section>

Answer 1

您必须从 style.css第90行中删除min-width: 500px;。
并添加

@media(min-width:500px){
  #showcase{
 min-width:500px;
 }
}

所以它看起来像-

Answer 2

如果您想要一个真正敏感的布局，请转换宽度以使用百分比。

header {
 padding-bottom: 2%;
 }

 #showcase{
 background-size:88%;
 }

#showcase h1{
  margin-top:5%;
}

在移动设备中，该网站无法正确响应，但在台式机上，它可以正常运行

2 个答案: