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

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

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

Answer 3

应用修复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 4

正如我所看到的，您在PX中添加了宽度，您只使用了一个媒体查询

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

尝试添加更多查询并保留所有宽度，并且还需要使图像响应于添加这些属性的图像 img{display： block;最大宽度：100%;高度：自动;}