寬度問題，自適應移動設計

Question

我目前正在使用的這個網站上的響應式設計存在問題。 當我通過手機訪問網站時，寬度小於所有div，因此文本等超出了手機寬度。 很難解釋，但是如果您看一眼，就會明白我在說什么。

如果您想查看手機上的外觀，請點擊此處。 http://royalq.site88.net/

如果在我的代碼中發現任何其他錯誤或問題，請隨時指出。 提前致謝 ：）

 html, body { margin: 0; padding: 0; } @font-face { font-family: 'drugsregular'; src: url('font1/drugs-webfont.eot'); src: url('font1/drugs-webfont.eot?#iefix') format('embedded-opentype'), url('font1/drugs-webfont.woff2') format('woff2'), url('font1/drugs-webfont.woff') format('woff'), url('font1/drugs-webfont.ttf') format('truetype'), url('font1/drugs-webfont.svg#drugsregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'coneria_script_demoregular'; src: url('font2/demo_coneriascript-webfont.eot'); src: url('font2/demo_coneriascript-webfont.eot?#iefix') format('embedded-opentype'), url('font2/demo_coneriascript-webfont.woff2') format('woff2'), url('font2/demo_coneriascript-webfont.woff') format('woff'), url('font2/demo_coneriascript-webfont.ttf') format('truetype'), url('font2/demo_coneriascript-webfont.svg#coneria_script_demoregular') format('svg'); font-weight: normal; font-style: normal; } a { text-decoration: none; color: white; } p { font-family: 'drugsregular'; font-size: 16px; text-align: justify; color: #E6E6E6; } h1 { font-family: 'coneria_script_demoregular'; font-size: 26px; text-align: center; color: white; } h2 { font-family: 'drugsregular'; font-size: 16px; color: white; padding-top: 0px; padding-left: 15px; height: 32px; } h3 { font-family: 'coneria_script_demoregular'; font-size: 20px; text-align: center; } h4 { font-family: 'coneria_script_demoregular'; font-size: 18px; text-align: center; color: black; } .Header { background-color: white; width: 100%; height: 60px; -webkit-box-shadow: 0px 2px 5px 0px #292929; -moz-box-shadow: 0px 2px 5px 0px #292929; box-shadow: 0px 2px 5px 0px #292929; position: fixed; } .Menu { padding-right: 30px; height: 60px; float:right; font-family: 'coneria_script_demoregular'; font-size: 20px; text-align: center; } .Menu ul { display: none; position: absolute; } .Menu li { margin:0 auto; display: inline-block; width: 100px; } .Menu li:hover > ul { margin:0 auto; right: 10px; display: block; font-family: 'drugsregular'; font-size: 14px; } .Menu a { background-color: #363636; padding-top: 12px; text-decoration:none; height: 48px; width: 120px; display: block; transition: .20s ease-in-out; -moz-transition: .20s ease-in-out; -webkit-transition: .20s ease-in-out; } .Menu a:hover { background-color: #FF6EDB; } .Logo { float:left; padding-left: 20px; padding-top: 10px; } .container1 { width: 100%; padding-top: 60px; height: 400px; } .bkimage1 { background-image: url(images/personalroyalq.jpg); background-repeat: no-repeat; background-size: cover; height: 745px; } .title { width: 665px; padding-top: 170px; margin: 0 auto; } .lasmer { background-color: #363636; height: 35px; width: 90px; margin: 0 auto; -webkit-box-shadow: 0px 1px 1px 0px #1f1f1f; -moz-box-shadow: 0px 1px 1px 0px #1f1f1f; box-shadow: 0px 1px 1px 0px #1f1f1f; transition: .20s ease-in-out; -moz-transition: .20s ease-in-out; -webkit-transition: .20s ease-in-out; } .lasmer:hover { background-color: #ec4e8c; } .lasmertext { font-family: 'drugsregular'; padding-left: 15px; padding-top: 5px; } .content { display: flex; margin: 0 auto; width: 1024px; } .firsti { margin: 0 auto; padding-right: 10px; padding-top: 25px; } .firstp { padding-top: 10px; width: 500px; height: 370px; margin: 0 auto; } .firstp p { font-family: 'drugsregular'; font-size: 16px; color: black; text-align: justify; } .container2 { height: 1000px; } .bkimage2 { height: 1000px; background-image: url(images/bkimage2.jpg); background-repeat: no-repeat; background-size: cover; } .content2title { margin:0 auto; padding-top: 90px; } .content2 { margin:0 auto; padding-top: 30px; height: 700px; width: 1024px; display: flex; } .c2leftimage { margin: 0 auto; width: 453px; } .c2rightimage { margin: 0 auto; width: 453px; height: 453px; } .footerbk { width: 100%; height: 350px; background-color: #070707; } .footer { margin:0 auto; width: 1024px; height: 350px; } .firstfooter { margin: 0 auto; display: flex; } .firstfooter p { } .firstfirstfooter { padding: 15px 0px 0px 30px; } .secondsecondfooter { padding: 15px 0px 0px 30px; } .thirdthirdfooter { padding: 15px 0px 0px 30px; } .fourthfourthfooter { padding: 15px 0px 0px 30px; } .secondfooter { display: flex; } .secondfooter a{ color: #FF6EDB; font-family: 'drugsregular'; font-size: 24px; opacity: 1; transition: opacity .20s ease-in-out; -moz-transition: opacity .20s ease-in-out; -webkit-transition: opacity .20s ease-in-out; } .secondfooter a:hover { opacity: 0.5; } .firstfirstfooter { padding: 10px 0px 0px 0px; } .secondsecondfooter { padding: 10px 0px 0px 30px; } .thirdthirdfooter { padding: 10px 0px 0px 30px; } .fourthfourthfooter { padding: 10px 0px 0px 30px; } .thirdfooter { display: flex; } .firstfirstfirstfooter { padding: 75px 0px 0px 30px; } .fourthfooter { display: flex; } .firstfirstfirstfirstfooter { padding: 0px 0px 0px 0px; } .secondsecondsecondsecondfooter { padding: 0px 0px 0px 30px; } .thirdthirdthirdthirdfooter { padding: 0px 0px 0px 30px; } .fourthfourthfourthfourthfooter { padding: 0px 0px 0px 30px; } @media screen and (max-width: 800px) { .Header { position: relative; } .container1 { padding-top: 0px; } .bkimage1 { } .title { width: 440px; } .content { display: inline; } .firsti { width: 440px; } .firstp { height: 400px; width: 440px; } .container2 { height: 1400px; } .bkimage2 { height: 1400px; } .content2title { padding-top: 30px; } .content2 { display: inline; } .footerbk { height: 650px; } .footer { width: 440px; } .firstfooter { width: 250px; } .firstfirstfooter { padding: 10px 0px 0px 0px; } .secondfooter { padding-left: 30px; } .fourthfooter { display: inline; } .firstfirstfirstfirstfooter { padding: 0px 0px 0px 30px; } .secondsecondsecondsecondfooter { padding: 5px 0px 0px 30px; } .thirdthirdthirdthirdfooter { padding: 10px 0px 0px 30px; } .fourthfourthfourthfourthfooter { padding: 5px 0px 0px 30px; } } 

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/style.css" rel="stylesheet"> <link rel="shortcut icon" href="favicon.ico"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>Royal Q UF</title> </head> <body> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/sv_SE/sdk.js#xfbml=1&version=v2.5"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="Header"> <div class="Logo"> <a href="index.html"><img src="images/royalqlogo.png"></a> </div> <div class="Menu"> <nav> <li><a href="#">Meny</a> <ul> <a href="http://www.yourvismawebsite.com/royal-q-uf/natbutik">Nät</br>Butik</a> <a href="kontakt.html">Kontakt</a> </ul> </li> </nav> </div> </div> <div class="container1"> <div class="bkimage1"> <div class="title"> <h1> Royal Q </h1> <p> Royal Q lovar dig en parfym som du aldrig kommer glömma. Med unika aromer av Italiensk ursprung ger dig den en sensuell doft som är oemotståndlig... </p> </div> <a href="#content"> <div class="lasmer"> <div class="lasmertext">Läs Mer</div> </div> </a> </div> <div class="content"> <a name="content"></a> <div class="firsti"> <img src="css/images/bild1.jpg" width="440px" height="330px"> </div> <div class="firstp"> <p> Hej! Royal Q lovar dig en parfym som du aldrig kommer glömma. Med unika aromer av Italiensk ursprung så ger dig den en sensuell doft som är oemotståndlig. Med detta tillkommer även en snyggt designad flaska som är ensam i sitt slag med en högklassig förpackning. </p> <p> Utöver vår parfym bär vi även botemedlet mot vintern. På Royal Q erbjuder vi exotiska badbomber med olika lukter, färger och former. Dessa badbomber kommer ge dig en stund för ro och avkoppling som får dig att glömma vintertiden med ett dopp. </p> <p> Vår produktion är etablerad i Alingsås och vi säljer produkterna genom återförsäljning, direktförsäljning och försäljning via internet. Vår ide är att erbjuda produkter som är unika och håller en hög klass men till ett rimligt pris. </p> </div> </div> <div class="container2"> <div class="bkimage2"> <div class="content2title"> <h1>Följ oss på våra sociala medier!</h1> </div> <div class="content2"> <div class="c2leftimage"> <a href="https://www.instagram.com/royalq_uf/"><img src="css/images/instagram1.png"></a> <script src="http://snapwidget.com/js/snapwidget.js"></script> <iframe src="http://snapwidget.com/in/?u=cm95YWxxX3VmfGlufDEwMHwzfDN8fG5vfDV8ZmFkZU91dHxvblN0YXJ0fHllc3x5ZXM=&ve=230116" title="Instagram Widget" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%;"></iframe> </div> <div class="c2rightimage"> <a href="https://www.facebook.com/Royal-Q-UF-770187479756914/?fref=ts"><img src="css/images/facebook1.png"></a> <div class="fb-page" data-href="https://www.facebook.com/Royal-Q-UF-770187479756914" data-tabs="timeline" data-width="453" data-height="453" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"></div> </div> </div> </div> </div> <div class="footerbk"> <div class="footer"> <div class="firstfooter"> <div class="firstfirstfooter"> <p>Copyright © 2015-2016 Royal Q UF. Alla rättigheter reserverade.</p> </div> </div> <div class="secondfooter"> <div class="firstfirstfooter"> <a href="https://www.instagram.com/royalq_uf/">Instagram</a> </div> <div class="secondsecondfooter"> <a href="https://www.facebook.com/Royal-Q-UF-770187479756914/?fref=ts">Facebook</a> </div> </div> <div class="thirdfooter"> <div class="firstfirstfirstfooter"> <h1>VÅRA SPONSORER</h1> </div> </div> <div class="fourthfooter"> <div class="firstfirstfirstfirstfooter"> <img src="css/images/kicks.png" height="65" width="174"> </div> <div class="secondsecondsecondsecondfooter"> <img src="css/images/ica_maxi.png" height="57" width="138"> </div> <div class="thirdthirdthirdthirdfooter"> <img src="css/images/skor.png" height="69" width="300"> </div></br> <div class="fourthfourthfourthfourthfooter"> <img src="css/images/sparbanken.png" height="70" width="230"> </div> </div> </div> </div> </div> </body> </html> 

Answer 1

此CSS會導致問題：

@media screen and (max-width: 800px)
.title {
    width: 440px;
}

在非常小的屏幕尺寸下，440px將超過屏幕。 嘗試90％或其他方法。

Answer 2

您將固定width更改為媒體查詢的所有width

例

.footer {
    margin:0 auto;
    width: 1024px;
    height: 350px;
}
c2leftimage {
    margin: 0 auto;
    width: 453px;
}
.c2rightimage {
    margin: 0 auto;
    width: 453px;
    height: 453px;
}

Answer 3

如我所見，您在PX中添加了寬度，您僅使用了一個媒體查詢

@media screen and (max-width: 800px)   

嘗試添加更多查詢並保留所有寬度，並且還需要使圖像響應以對圖像進行添加這些屬性img {display：block; 最大寬度：100％; 高度：自動；}

Answer 4

固定寬度是您的問題（圖像或文本的問題）-嘗試以百分比而非固定寬度（以像素為單位）...至少對於小於500px的設備寬度而言。