响应式移动网站遇到问题

Question

我已经创建了该网站，并在google开发人员工具中进行了检查，该网站在我的电脑上看起来都很棒，并且对较小的窗口尺寸反应良好。

当我将网站上传到主机时，该网站在移动版本右边有一些奇怪的边距。而且，有些风格根本不合适。我设置了初始比例，以及使用的媒体查询。我将提供以下网站的链接。如果有人可以帮助我，那就更感激了。作为自己学习的人，听听更有经验的开发人员的意见会很棒（：

网站：http://www.onceuponaneventnj.com/

＆＃13;

＆＃13;

body{
  margin:0;
  padding:0;
  overflow-x:hidden;
  background-color:#EB9AAA;
}
header{
  background-image:url("http://static2.businessinsider.com/image/568d6b65dd0895aa458b46bd-1190-625/bride-outraged-after-the-knot-helps-wedding-venue-bury-negative-review.jpg");
  height:85vh;
  background-size:cover;
  background-position:center;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
header{
  height:85vh;
  background-size:auto;
  background-attachment:scroll;
}
@media screen and (max-width:754px){
  header{
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:left;
    height:82vh;
  }
}

.banner_header{
  display:flex;
  height:100vh;
  align-items: center;
  margin-left:550px;
  width:100%;

}
@media screen and (max-width:1100px){
  .banner_header{
    margin-left:100px;
  }
}
.banner_header_text{
  font-family: 'Dancing Script', cursive;
  font-size:68px;
  color:#EE7E7E;
  animation:banner_animation 3s ease-in;
  max-width:100%;
  margin-left:-70px;
}
@media screen and (max-width:600px){
  .banner_header_text{
    display:none;
  }
}
@keyframes banner_animation{
  from{opacity:0}to{opacity:1}
}
#stars{
  opacity:.60;

}
.logo h1{
  font-size:34px;
  color:white;
  margin-right:100px;
  margin-top:15px;
  font-family: cursive,sans-serif;
}
.logo h1 a{
  text-decoration: none;
  color:white;
  letter-spacing:1px;
}
@media screen and (max-width:600px){
  .logo h1{

    display:flex;
    justify-content: center;!important;
    align-items: center;
    width:100%;
    height:100px;
    margin-top:-20px;
    padding-top:5px;
    font-size:25px;
    font-family:'tangerine',cursive,sans-serif;

  }
  header{
    height:85vh;
  }
}
/*-------------MAIN NAVIGATION---------------------------*/
.main-navigation{
  display:flex;
  margin:0;
  padding:0;
  background-color:#EE7E7E;
  width: 100%;
  height:70px;
  justify-content: center;
}
.main-navigation ul{
  display:inline-flex;
}
.main-navigation ul li{
  font-size:20px;
  z-index:1;
  list-style:none;
  padding-top:10px;
}
.main-navigation ul li a{
  text-decoration:none;
  color:white;
  padding:15px;
  font-family:'Lato',sans-serif;
}
.main-navigation ul li a:hover{
  opacity:.20;
}
nav ul li:hover .menu_services_child{
  display:flex;
}
nav ul li:hover>.menu_services_child a{
  color:#f45050;
}
.menu_services_child{
  display:none;
  height:500px;
  flex-direction:column;
  position:absolute;
  padding-top:15px;
  color:#F45050;
  margin-left:10px;
  font-size:18px;
}
label{
  margin-left:20px;
  width:100%;
  position:absolute;
  font-size:32px;
  line-height:70px;
  display:none;

}
#toggle{
  display:none;
}
@media screen and (max-width:667px){
label{
    display:block;
    cursor:pointer;
  }
  nav{
    visibility: hidden;
  }
  .main-navigation{
    width:100%;
    font-size:15px;
    height:80px;
  }
  .main-navigation ul li{
    padding-top:0;
  }

nav ul{
  display:block;
  margin-top:80px;
  margin-right:-30px;
}
nav ul li{
display:block;
}

.main-navigation ul {
  display:flex;
  flex-direction: column;
  margin-left:-405px;

  }
  .main-navigation ul li a{
    font-size:16px;
    text-align:center;
    color:black;
    font-family:cursive,sans-serif;
    display:inline-block;
    background-color:pink;
    width:100%;
  }
  .main-navigation .menu_services_child a{
    font-size:12px;

  }
  .menu_services_child{
    height:210px;
    width:100%;
    margin-left:0;
  }

  nav ul li:hover .menu_services_child {
    display:flex;
    flex-direction:column;
    font-size:15px;
    position:relative;
    width:100%;
    font-size:2px;
    padding-top:5px;
  }
input[type=checkbox]:checked~nav{
  visibility: visible;
}


}


/*-----------------------------------------------------
-----------------------AFTER HEADER , PINK BOX--------*/
.first_container{
  height:200px;
  width:100%;
  background-color:#E48C8C;
}
@media screen and (max-width:600px){
  .first_container{
    height:120px;
    line-height:40px;;
  }
}
.pt_one{
  padding:10px;
  letter-spacing:3px;
}
.main_tag_one{
  font-size:35px;
  margin-bottom:12px;
  display:flex;
  justify-content:center;
  color:#EEE9E9;
  font-family: 'tangerine', cursive;
}
.underline_firstcontainer{
  border-top:1px solid #CA7474;
  width:10%;
  height:1px;
  position:absolute;
  margin-top:20px;
  margin-left:120px;
}
@media screen and (max-width:600px){
  .main_tag_one{
    display:none;
  }
}
.main_tag_two{
  font-size:25px;
  margin-top:50px;
  color:#FFC0C0;
  display:flex;
  justify-content: center;
  font-family: 'Bubbler One', sans-serif;
}
@media screen and (max-width:600px){
  .main_tag_two{
    font-size:20px;
    width:100%;
    text-align:center;
    margin-top:1px;
    color:#FCEAEA;
  }
}

/*---------------------
-----------------------------BOXES----------------------------*/
.second_container{
  display:grid;
  grid-template-columns: 25% 25% 25% 25%;
  height:400px;
  background-color:white;
  color:white;
}
@media screen and (max-width:600px){
  .second_container{
    display:block;
    width:100%;
  }
}
.box{
  background-color:#444;
  color:#fff;
  font-size:150%;
}
.box-a {
  background-image:url('images/wedding2.png');
  background-position:center;
  background-size:cover;
  filter:grayscale(70%);
  transition: .5s ease-in-out;
}
.box-a a{
  text-decoration: none;
  color:white;
}
#weddings{
  font-size:50px;
  display:flex;
  justify-content: center;
  height:100%;
  align-items: center;
  font-family: 'Tangerine', cursive;

}
.box-a:hover{
  filter:grayscale(0);
}
.box-b{
  background-image:url('images/social1.jpg');
  background-position:center;
  background-size:cover;
  overflow:hidden;
  filter:grayscale(70%);
  transition: .5s ease-in-out;
}
.box-b a{
  text-decoration: none;
  color:white;
}
.box-b:hover{
  filter:grayscale(0);
}
#social{
  font-size:50px;
  display:flex;
  justify-content: center;
  height:100%;
  align-items: center;
  font-family: 'Tangerine', cursive;
}
.box-c{
  background-image:url('images/corporate1.jpg');
  background-position:center;
  background-size:cover;
  filter:grayscale(70%);
  transition: .5s ease-in-out;
}
.box-c a{
  text-decoration: none;
  color:white;
}
.box-c:hover{
  filter:grayscale(0);
}
#corporate{
  font-size:50px;
  display:flex;
  justify-content: center;
  height:100%;
  align-items:center;
  font-family: 'Tangerine', cursive;
}
.box-d{
  background-image:url('images/island.jpg');
  background-position:center;
  background-size:cover;
  filter:grayscale(70%);
  transition: .5s ease-in-out;
}
.box-d a{
  text-decoration: none;
  color:white;
}
.box-d:hover{
  filter:grayscale(0);
}
.box-d_content{
  color:white;
  height:100%;
  font-size:50px;
  display:flex;
  justify-content: center;
  height:100%;
  align-items:center;
  font-family: 'Tangerine', cursive;
}
@media screen and (max-width:600px){
  .box-a{
    height:200px;
  }
  .box-b{
    height:200px;
  }
  .box-c{
    height:200px;
  }
  .box-d{
    height:200px;
  }
}
/*-------------------------------ABOUT SARA PAGE HOME------------------------
---------------------------------*/
.our_story{
  display:block;
  height:500px;
  width:100%;
  margin-bottom:250px;
}
.our_story img{
  width:267px;
  height:400px;
  border-radius:20px;
  margin-left:-100px;
  position:absolute;
}
.our_story_title{
  padding-top:15px;
  font-size:25px;
  font-family: 'Dancing Script', cursive;
}
#our_story_underline{
  border-bottom: 1px solid black;
  position:absolute;
  margin-top:120px;
  width:100px;
  text-align:center;
}
.our_story_subheader{
  font-size:14px;
  display:flex;
  justify-content: center;
  font-family:cursive, sans-serif;
}
.our_story_title{
  display:flex;
  justify-content:center;
}
#walt{
  display:flex;
  justify-content: center;
  margin-top:-10px;
  font-size:16px;
  width:100%;
  font-family: cursive, sans-serif;
}
.our_story_text {
  font-size:18px;
  display:inline-flex;
  line-height: 30px;
  height:100%;
  width:60%;
  align-items: flex-start;
  justify-content: center;
  font-family: 'Bubbler One', sans-serif;
  padding-left:100px;
  padding-right:20px;
  margin-right:100px;
}
@media screen and (max-width:600px){
.our_story{
  display:block;
  margin-top:400px;
  font-size:10px;
  height:900px;
  }
  #walt{
    font-size:12px;
    text-align:center;
  }
  .our_story_text{
    font-size:14px;
    width:80%;
    padding-left:50px;
    margin-right:50px;
    overflow:hidden;
    line-height:20px;
  }
  .our_story img{
    height:350px;
    margin-top:-400px;
  }
}
@media screen and (max-width:754px){
.our_story{
  display:block;
  margin-top:400px;
  font-size:10px;
  height:900px;
  }
  #walt{
    font-size:12px;
    text-align:center;
  }
  .our_story_text{
    font-size:14px;
    width:80%;
    padding-left:50px;
    margin-right:50px;
    overflow:hidden;
    line-height:20px;
  }
  .our_story img{
    height:350px;
    margin-top:-400px;
    margin-left:60px;
  }
}
.footer_wrapper{
  height:300px;
  width:100%;
  background-color:#E35B5B;
}
.footer_nav{
  display:inline-flex;
  width:100%;
  justify-content: center;
  margin-top:50px;
}
.footer_nav li{
  list-style:none;
}
.footer_nav li a{
  font-size:40px;
  color:#EE7E7E;
  padding:20px;
  text-decoration:none;
  font-family: 'Bubbler One', sans-serif;
}
.footer_nav li a:hover{
  color:white;
}
.footer_icons ul{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100px;
  width:100%;
  list-style: none;
  color:white;
  margin-top:-10px;
}
.footer_icons ul li{
  font-size:40px;
  text-decoration: none;
  background:#CA7474;
  border-radius:100px;
  margin:10px;
}
.footer_icons ul li a{
  padding:18px;
  color:#F3C7C7;
}
.footer_icons ul .facebook:hover{
  background:#3b5998;
  opacity:.88;
}
.footer_icons ul .instagram:hover{
  background:#9b6954;
  opacity:.88;
}
.footer_icons ul .linkedin:hover{
  background:#0077B5;
  opacity:.88;
}
#email{
  display:flex;
  font-size:16px;
  justify-content: center;
  width:100%;
  margin-left:50px;
  margin-top:-20px;
  font-family:'lato';
}
#email a{
  text-decoration: none;
  color:#EE7E7E;
}
#email a:hover{
  color:#FFEDED;
}
.footer_cellphone{
  display:flex;
  justify-content: center;
  margin-top:10px;
  font-size:16px;
  margin-left:50px;
  color:#EE7E7E;
  text-decoration: none;
  font-family:'museo_sans300';
  width:100%;
}
.footer_cellphone:hover{
  color:#FFEDED;
}
@media screen and (max-width:600px){
  .footer_wrapper{
    height:300px;
  }
  .footer_nav li a{
    font-size:30px;
    padding:10px;
  }
  .footer_nav{
    text-align:center;
    margin-left:-45px;
  }
  .footer_icons{
    display:flex;
    justify-content: center;
    margin-left:-50px;
  }
  .footer_icons ul li{
    font-size:20px;
  }
  #email{
    width:200px;
    margin:-20px auto auto auto;
  }
  .footer_cellphone{
    width:200px;
    margin:10px auto auto auto;
  }
}

＆＃13;

<!doctype html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Dancing+Script|Lato|Open+Sans" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Bubbler+One" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
    <script src="https://use.fontawesome.com/c270b3bf59.js"></script>
    <title>Once Upon An Event</title>
  </head>



<header>
  <div class="main-navigation">
    <div class="logo">
      <h1><a href="index.html">Once Upon An Event</a></h1>
    </div>
    <label for="toggle">&#9776;</label>
    <input type="checkbox" id="toggle"</input>
      <nav>
        <ul id="menu_services">
            <li>
              <a href="#">Services</a>
                <div class="menu_services_child">
                  <a href="weddings.html">Weddings</a>
                  <a href="Social.html">Social</a>
                  <a href="corporate.html">Corporate</a>
                  <a href="vacation.html">Vacation</a>
                </div>
            </li>
              <li><a href="about.html">About</a></li>
              <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>

    </div>
    <div class="banner_header">
      <div class="banner_header_text">
        <h1>Making Dreams A Reality...</h1>
      </div>
    </div>
</header>

<body>
  <div class="first_container">
    <div class="pt_one">
      <div class="main_tag_one"><h2>Once Upon An Event</h2><div class="underline_firstcontainer"></div></div>
      <div class="main_tag_two"><h3>Planning the Event you've Always Dreamed Of</h3></div>
    </div>
  </div>

  <div class="second_container">
        <div class="box-a"><a href="weddings.html"><div id="weddings">Weddings</div></a></div>
        <div class="box-b"><a href="social.html"><div id="social">Social</div></a></div>
        <div class="box-c"><a href="corporate.html"><div id="corporate">Corporate</div></a></div>
        <div class="box-d"><a href="Vacation.html"><div class="box-d_content">Vacation</div></a>
        </div>
  </div>
<div class="our_story">
  <div class="our_story_title">
    <div id="our_story_underline"></div>
    <h1>Sara Ray</h1></div>
    <div class="our_story_subheader"><h2>Founder &amp; CEO</h2></div>
      <div id="walt">  <h3><b>”All our dreams can come true, if we have the courage to pursue them.” ~ Walt Disney</b></h3></div>
          <div class="our_story_text"><p>     A graduate from the State University of New York at New Paltz, Sara began her career by

working for The SYNERGY Events. She helped coordinate the Emerging Trends Fashion Show which took place during both New

York and Boston's Fashion Week. Her main duties included booking various vendors like

photographers, entertainment, hairstylists/MUA as well as making the event run as smoothly as

possible.   In addition, she worked for Todd &amp; Jayde in the Morning on WPLJ 95.5 where she

assisted with multiple tasks in a fast-paced environment .<br><br>

     Lastly, Sara worked for the Madison Square Garden Company with the Communications team

for the New York Rangers. Within that time frame, she helped plan and organize on and off-ice

events and setting up the media area prior to every hockey game .<br><br>

     All of these skills Sara has aquired throughout these experiences have given her a chance

to grow and become more knowledgable in the field. This is why she came to the decision

to open up Once Upon An Event, LLC. OUAE will focus on every client's individual needs and wants, guranteeing their event is as magical as they imagined.

OUAE can be the key component to making a client’s

dreams, a reality..</p>
      </div>
          <img src="images/saraabout.jpg"width="500px" height="800px">


</div>
</body>
<footer>
  <div class="footer_wrapper">

      <ul class="footer_nav">
        <li><a href="about.html">About</a></li>
        <li><a href="weddings.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>

      </ul>

    <div class="footer_icons">
    <ul>
      <li class="facebook"><a href="https://www.facebook.com/onceuponaneventnj/" target="_blank"><i class="fa fa-facebook fa-fw" aria-hidden="true"></a></i></li>
      <li class="instagram"><a href="https://www.instagram.com/onceuponanevent_/"target="_blank"><i class="fa fa-instagram fa-fw" aria-hidden="true"></a></i></li>
      <li class="linkedin"><a href="https://www.linkedin.com/in/sararayrozycki/" target="_blank"><i class="fa fa-linkedin fa-fw" aria-hidden="true"></a></i></li>
    </ul>
    </div>
      <div id="email"><a href="mailto:onceuponaneventservices@gmail.com">OnceUponAnEventServices@gmail.com</a></div>
        <div class="footer_cellphone">Contact Us: 201-456-6773</div>

  </div>
</footer>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你在这里粘贴了太多的代码，而你却不能指望有人通过这一切并修复它。

我可以告诉您，在Chrome开发者工具（或最受欢迎的浏览器的开发工具）中，可以选择将浏览器缩小到流行手机的移动尺寸。

如果您选择其中一个预设，那么您可以查看您的开发工具以查看出现了什么问题，查看并调整属性以查看它们应该达到此大小。也许那时您可能需要添加一些额外的媒体查询。

不要分阶段，很少有你会有一个很好的规则，可以很好地扩展所有尺寸。通常需要多个媒体查询。

祝你好运！