響應式移動網站遇到問題

Question

我已經創建了該網站，並在google開發人員工具中對其進行了檢查，該網站在我的PC上看起來都很不錯，並且對較小的窗口大小響應良好。

當我將網站上傳到主機時，該網站在移動版本的右邊有奇怪的邊距。此外，某些樣式簡直就是不合適。 我設置了初始比例以及使用的媒體查詢。 我將提供指向以下網站的鏈接。 如果有人可以幫助我，那將不勝感激。 作為一個自己學習的人，很高興聽到經驗豐富的開發人員的意見（：

網站： http ： //www.onceuponaneventnj.com/

 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; } } 

 <!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> 

Answer 1

您在此處粘貼了太多的代碼，而您不能指望某人會仔細檢查並修復它。

我可以告訴您，在Chrome開發者工具（或最流行的瀏覽器的開發工具）中，有一個選項可以將瀏覽器縮小到適合流行手機的移動尺寸。

如果選擇這些預設之一，則可以查看開發工具以查看出現了什么問題，然后查看並調整屬性以查看在此大小下應該是什么。 也許那時您可能需要添加一些額外的媒體查詢。

不要分階段進行，很少有一條規則可以很好地縮放所有大小的所有內容。 通常，需要多個媒體查詢。

祝好運！