宽度，响应式移动设计的问题

Question

我目前正在处理此网站上的代理设计问题。当我在手机上访问该网站时，宽度小于所有div，因此文本等超出了手机宽度。很难解释，但如果你看看你会看到我在说什么。

如果您想了解它在手机上的外观，请点击链接。 http://royalq.site88.net/

如果您在我的代码中发现任何其他错误或问题，请随时指出。在此先感谢：）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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％; height：auto;}

Answer 4

固定宽度是您的问题（图像或文本） - 尝试以百分比形式，而不是固定（以像素为单位）...至少对于小于500px左右的设备宽度。