问使元素适合移动优先/媒体查询的问题
EN

Stack Overflow用户

提问于 2018-05-28 17:08:12

回答 1查看 30关注 0票数 0

我从来没有完成我的网络集成商教育，但我现在是一名媒体图形实习生，我提供了一些css和html代码。所以我很生疏，这个项目既是一个正常的项目，也是一个知识的更新。所以请对我友好点。

我正在使网站响应，但我有一个问题，为手机屏幕大小编码。在“我的内容”的右侧，背景图像继续显示，允许您横向滚动。我根本找不到是什么导致了这一点。图像和所有内容都经过编辑以适应那里的宽度。

我有一个怀疑，那就是我可能把像素的宽度搞乱了。我已经让它适合屏幕，但我应该忘记这一点，并使用手机屏幕的实际宽度吗？只是看起来很小，在1090px的宽度下似乎工作得很好，只是背景推到了一边。

这是我在手机上使用的媒体查询的css代码。

    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

    /* Splitters */

    .splitter1 {
        visibility: hidden;
        height:0;
        width:0;
        z-index:1000;
    }

    .splitter1mobile {
        visibility: visible;
        height:250px;
        width:1090px;
        margin:0;
        padding:0;
        z-index:1000;
    }

    .splitter2 {
        visibility: hidden;
        height:0;
        width: 0;
        z-index:1000;
    }

    .splitter2mobile {
        visibility:visible;
        height:250px;
        width:1090px;
        margin:0;
        padding:0;
        z-index:1000;
    }

    .splitter3 {
        visibility: hidden;
        height:0;
        width: 0;
        z-index:1000;

    }

    .splitter3mobile {
        visibility: visible;
        height:250px;
        width:1090px;
        margin:0 0 7px 0;
        padding:0;
        z-index: 1000;
    }

    .splitter4 {
        visibility: hidden;
        width: 0;
        height: 0;
    }

    .splitter4mobile {
        visibility: visible;
        height:250px;
        width:1090px;
        margin:-2px 0 0 0;
        padding:0;
        z-index: 1000;
    }



.orangesplitter {
    height:100%;
    width:100%;
    margin-top:-17px;
    margin-bottom:-11px;
}

.greysplitter {
    height:239px;
    width:100%;
    margin:-19px 0 26px 0;

}


    footer { 
    width:86.5%;
}

    .Element-header {
  transform: translate3d(0,0,0);
}

    .Element-header--fixed {
      top: 0;
      position: fixed;
}

    /*------------- Body --------------*/

    .fysphone {
        margin-left:57px;
        margin-top:112px;
        visibility: visible;
        width:56%;
        height:45%;
    }

    .fysphone img {
        visibility: visible;
        width:100%;
        height:500px;
    }

    .fysimgbox {
        display:none;
    }

    .jonimgbox {
        visibility: hidden;
        width:0;
        height:0;
    }

    .contentwrapper {
        width:100%;
        display:inline-block;
    }

    .textbox {
        width:90%;
    }

    .jonimgboxphone {
        margin-top:22px;
    }

    .jonnicephone {
        margin:0 0 0 100px;
    }

    .jontitelphone {
        margin-left:199px;
    }

    header {
        transform: translate3d(0,0,0);
        z-index: 1000;
        padding:0;
        margin:0;
        width:1090px;
        height:265px;
        position:fixed;
        box-shadow:0 5px 15px 0 #7d7b7c;
    }


    body{
        padding:0;
        margin:0 auto;
        width:1090px;
        height:8227px;
        background-image: url(img/wallbgfadedphone.png);
        background-repeat:repeat;
        background-blend-mode: overlay;
    }

    .imgmbox {
        margin-left:0;
        margin-right:10px;
    }

    /*----- Google Maps -----*/
    iframe {
        margin-top:150px;
        margin-right:20px;
        width:500px;
        height:350px;

    }

    .wrapper {
      margin: 0 auto;
      width:100%;
      height: 8227px;
    }
/*------------- Header ------------*/


/*------------- Header Navbar ------------*/

    .Hnavbar {
        margin-top:0;
        height:101px;
        width:100%;
        box-shadow: inset 0 0 0 1000px rgba(125,123,124,.9);
        background-image:url(img/wallbg.jpg);

    }   

    .nav1 {
        margin-left:-26px;
    }

    nav ul {
        height:101px;
        float:left;
        margin:0;
        width:100%;
    }
    nav ul li {
        margin-left:30px;
        margin-top:18px;
        float:left;
        height:30px;
        list-style: none;
        border-radius: 9px;
    }
    nav ul li a {
        font-family:Exo;
        color: #dedede;
        padding:5px 23px 5px 23px;
        border-top:1px solid #dedede;
        border-bottom:1px solid #dedede;
        text-decoration: none;
        text-align: center;
        font-size: 40px;
    }

    .fblink {
        width:50px;
        height:50px;
        float:left;
        margin-left:150px;
        margin-top:15px;
        display:none;
    }

.fbicon:hover {
    opacity:1.0;
}


/*** Content Block ***/
.contentblock {
    width:100%;
    height:1200px;
    background-color:rgb(255,255,255,0.8);
    display:inline-block;
    opacity:0.9;        
}


.contentblock1 {
    width:100%;
    height:1239px;
    background-color:rgb(255,255,255,0.8);
    display:flex;
    opacity:0.9;
}    

.contentblock2 {
    display:inline-block;
    width: 100%;
    height:1971px;
    background-color:rgb(255,255,255,0.8);
    opacity:0.9;
    margin-top:10px;
}

#contentblock3 {
    width: 100%;
    height:1120px;
    background-color:rgb(255,255,255,0.8);
    display:inline-block;
    opacity:0.9;

}

/*** Anchor Menupoint Scrollpositioner ***/
.anchor {
    display:none;
    height:265px;
    margin-top: -265px;
    visibility:hidden;
}

/*** Om Text ***/
.textbox p {
    font-family:Exo-Regular;
    width:100%;
    margin:0 auto 0 35px;
    font-size:33px;
    font-weight: 600;
    color:#7d7b7c;
    padding:0;
}

/*** Fys Text ***/    
.fysbox {

    font-family:Exo-Regular;
    width:100%;
    height:850px;
    color:#7d7b7c;
    padding:0;
}
.fysbox h2 {
    font-size:40px;
    margin-left:35px;
}

.fysbox p {
    font-family:Exo-Regular;
    width:90%;
    margin:0 0 0 35px;
    font-size:33px;
    font-weight: 600;
    color:#7d7b7c;
    padding:0;

}

.fysbox ul li {
    font-size:33px;
    font-weight:600;
}

    .textwrapper {
        width:100%;
        padding:20px;
}



/** Træning Text **/
.traeningbox p {
    font-family:Exo-Regular;
    width:100%;
    margin:0 auto 0 35px;
    font-size:33px;
    font-weight:600;
    color:#7d7b7c;
    padding:0;
}

.traeningbox h2 {
    font-size: 40px;
    margin-left:35px;
}

    .traeningbox {
        width:90%;
    }


/*---- Priser Text ----*/
.textboxpris {
    float:left;
    font-family:Exo-Regular;
    width:350px;
    margin:0 0 0 35px;
    font-size:24px;
    font-weight:600;
    color:#7d7b7c;
    padding:20px;
}

    .textboxpris p {
        font-size:33px;
    }

    .prish {
        width:188px;
    }

    .pristext {
        width:757px;
    }

.textboxpris h2 {
        font-size:40px;
}

.pristext {
        font-size: 26px;
        font-weight: 600;
        margin-top:100px;
}

.prispunkt {
        font-size:26px;
}

    .textwrapperpris {
        width:872px;
}

    .textwrapperpris h2 {

    }

.prisv {
    float:left;
    width:570px;
    height:200px;
}

.prisimgbox {
    visibility: hidden;
    width:0;
    height:0;
}

/*--- Kontakt text ---*/

.kontaktbox  {
    margin:0 0 0 98px;
    float:left;
    width:852px;
    height:600px;
    padding:0px;
    font-family: Exo-Regular;
    font-size:33px;
    font-weight:600;
}

.kontaktbox h2 {
        font-size: 40px;
    }

    iframe {
        display:none;
    }


.traeningimgbox {
    visibility: hidden;
    width:0;
    height:0;

}

    footer {
        width:905px;
    }

}


And this is my HTML

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Slagelse Sportsklinik</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <a name="top"></a>
   <div class="wrapper">
    <header>
        <div class="Hlogobox">
            <a href="index.html"><img src="img/logowhite.png" alt=""></a>
        </div>
        <nav class="Hnavbar">
            <ul>
                <li class="nav1"><a href="#top"><span>Home</span></a></li>
                <li><a href="#fysmenu"><span>Fysioterapi</span></a></li>
                <li><a href="#træningmenu"><span>Træning</span></a></li>
                <li><a href="#prismenu"><span>Priser</span></a></li>
                <li class="nav5"><a href="#kontaktmenu"><span>Kontakt</span></a></li>
                <a class="fblink" target="_blank" href="https://www.facebook.com/slagelsesportsklinik"><img class="fbicon" src="img/icons/facebook.png" alt=""></a>
            </ul>
        </nav>
    </header>

    <main>
        <div class="contentblock1">
        <div class="contentwrapper">
         <div class="jonimgboxphone">
            <img class="jontitelphone" src="img/jontitel.png" alt="">
            <br>
            <img class="jonnicephone" src="img/jonnice.png" alt="">
        </div>
        <div class="textbox">
            <p>
                <b>Slagelse Sportsklinik</b> startede i 2017 af fysioterapeut Jon Ahrensbøll med ønsket om at ville starte en klinik, der leverede hurtige og markante resultater, der skulle sikre hurtig tilbagevenden til idræt eller arbejde.
                <br>
                <br>
                <span class="jonahrensboll"><b>Jon Ahrensbøll</b></span> har igennem 18 år arbejdet som fysioterapeut på forskellige klinikker med alle typer af patienter. De senere år har patientgruppen primært været idrætsfolk primært indenfor triatlon, løb og cykling. Jon Ahrensbøll er samtidigt tilknyttet Gørlev Fysioterapi og Idrætsklinik som fysioterapeut med fysioterapeutisk ansvar for både Vestsjællands Idrætsefterskole og Gørlev Idrætsefterskole.

            </p>
        </div>
        <div class="jonimgbox">
            <img class="jontitel" src="img/jontitel.png" alt="">
            <img class="jonnice" src="img/jonnice.png" alt="">
        </div>
        </div>
        </div>

         <div class="orangesplitter">
                                    <img class="splitter1" src="img/orangesplitter1.png" alt="">
                                    <img class="splitter1mobile" src="img/orangesplitter1mobile.png" alt="">
         </div>

        <a name="fysmenu"></a>
         <span class="anchor" id="section2"></span>
        <div class="contentblock2">
        <div class="totalwrap">
         <div class="fysphone">
              <img class="img" src="img/jonbrugerlaser.png" alt="">
         </div>
           <div class="fysbox">
           <div class="textwrapper">

           <h2>Fysioterapi</h2>

            <p>
                Hos Slagelse Sportsklinik udfører vi fysioterapeutiske behandlinger af høj kvalitet. Vi har en høj grad af information om både tests og behandling, og vi tillægger altid et holistisk perspektiv i vores behandlinger.
               <br>
               <br>
                For at opnå størst mulig positiv effekt benytter vi forskellige fysioterapeutiske, osteopatiske og kiropraktiske manuelle teknikker, ligesom vi ofte inddrager forskellige former for træningsøvelser.
               <br>
               <br>
                Udover manuelle teknikker og træningsøvelser benytter vi desuden bl.a.

            </p>
                <ul>
                    <li>IMS (Intra Muskulær Stimulation) dvs. behandling med nåle, hvorved bl.a. muskulatur afspændes hurtigt.</li>
                    <li>Kinesiotape, dvs. optapening med hyperelastisk tape, der på en gang støtter og bibeholder fuld funktion af både muskler og led.</li>
                    <li>High Power Laser, dvs. laserbehandling, der skaber en kemisk modulering af vævet, så opheling sker markant hurtigere</li>
                </ul>
            </div>


         </div>
            <div class="fysimgbox">
              <img class="imgfys" src="img/jonbrugerlaser.png" alt="">
            </div>
        </div>
         </div>
          <div class="greysplitter"><img class="splitter2" src="img/greysplitter1.png" alt="">
                                    <img class="splitter2mobile" src="img/greysplitter1mobile.png" alt="">
          </div>

        <a name="træningmenu"></a>

        <span class="anchor" id="section2"></span>
        <div class="contentblock3" id="contentblock3">
        <div class="traeningbox">
          <div class="textwrapper">
           <h2>Træning</h2>
            <p>
               Hos Slagelse Sportsklinik tilbydes træning på små hold (max. 5 personer). Vi har forskellige former for holdtræning, og ens for dem alle er, at der er fokus på CORE, stabilitet og -ikke mindst- funktionalitet. Træningen er målrettet den enkelte deltager, således at alle uanset niveau vil blive udfordret.
                <br>
                <br>
                Vi har valgt små hold ud fra ideen om, at på små hold er det intensiv, nærmest personlig træning samtidigt med, at man fortsat kan være social.

                <br>
                <br>
                På alle hold benyttes styrke- og udspændingsøvelser hentet fra Pilates, Yoga og CORE, ligesom der benyttes træning i TRX, dvs. træning i slynger med egen kropsvægt som modstand.
            </p>
            </div>
          </div>
            <div class="traeningimgbox">
                <img src="img/grittoneddown.png" alt="">
                <img class="pushimg" src="img/stretch.png" alt="">
            </div>
         </div>
           <div class="orangesplitter">
                <img class="splitter3" src="img/orangesplitter2.png" alt="">
                <img class="splitter3mobile" src="img/orangesplitter2mobile.png" alt="">
          </div>
        <a name="prismenu"></a>
         <span class="anchor" id="section2"></span>


        <div class="contentblock">
          <div class="textboxpris">
          <div class="textwrapperpris">

           <h2>Priser</h2>

            <p class="prisv">
                Fysioterapeutisk behandling pr. gang <br><br>
                Træning pr. gang <br><br>
                Træningsklippekort - 10 gange <br><br>
                Behandlingsklippekort - 10 gange <br><br>
            </p>

            <p class="prispunkt">
                <b>•</b><br><br>
                <b>•</b><br><br>
                <b>•</b><br><br>
                <b>•</b><br><br>
            </p>

            <p class="prish">
               <b>kr. 275,00</b> <br><br>
               <b>kr. 45,00 </b><br><br>
               <b>kr. 400,00</b> <br><br>
               <b>kr. 2500,00</b> <br><br>
            </p>

            <p class="pristext">
              Slagelse Sportsklinik har <b>ikke</b> overenskomst med Den Offentlige Sygesikring, så tilskud hertil kan ikke opnås. Dette betyder samtidigt, at der ikke kræves henvisning fra egen læge for at kunne få behandling hos Slagelse Sportsklinik.
            </p>

            </div>
           </div>

               <div class="prisimgbox"><img src="img/transaction.png" alt="">

               </div>
          </div>


            <div class="greysplitter">
                    <img class="splitter4" src="img/greysplitter2.png" alt="">
                    <img class="splitter4mobile" src="img/greysplitter2mobile.png" alt="">
            </div>

        <a name="kontaktmenu"></a>
        <span class="anchor" id="section2"></span>
        <div class="contentblock" id="contentblock5">
            <div class="kontaktbox">
           <h2>Kontakt</h2>
            <p>
                Du kan kontakte klinikken på følgende måder:
            </p>
              <ul>
                  <li><p><b>Telefon</b></p></li>
                  <li><p><b>Mail</b></p></li>
                  <li><p><b>Snailmail</b></p></li><br><br>
                  <li><p><b>Facebook</b></p></li>
              </ul>
               <ul>
                  <li><p>2844 0023</p></li>
                  <li><p>slagelsesportsklinik@gmail.com</p></li>
                  <li><p>Slagelse Sportsklinik <br>
                          Nytorv 4, 1. sal <br>
                          4200 Slagelse</p></li>
                  <li><a target="_blank" href="https://www.facebook.com/slagelsesportsklinik">www.facebook.com/slagelsesportsklinik</a></li>
              </ul>
            </div>
             <iframe

                  frameborder="0" style="border:0"
                  src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDXNF-E5Se1Suc6FWGmQWoH_bcpHoSwEEs
                    &q=Nytorv4+Slagelse,Slagelse+DK" allowfullscreen>
            </iframe>
        </div>
    </main>
    <footer>
       <div class="footerleft">
        <adress>Slagelse Sportsklinik</adress><br>
        <adress>Nytorv 4, 1. Sal</adress><br>
        <adress>4200 Slagelse</adress><br>
       </div>
       <div class="footerright">
        <img class="footericon" src="img/icons/tlf.png" alt=""><adress>2844 0023</adress><br><br>
        <img  class="footericon" src="img/icons/mail.png" alt=""><adress>slagelsesportsklinik@gmail.com</adress><br><br>
        <img  class="footericon" src="img/icons/fbsort.png" alt=""><adress><a target="_blank" href="https://www.facebook.com/slagelsesportsklinik">www.facebook.com/slagelsesportsklinik</a></adress>  
       </div>
    </footer>
  </div>

</body>
</html>

html

css

media

回答 1

Stack Overflow用户

发布于 2018-05-28 17:13:38

将以下内容添加到容器div中，在本例中为wrapper：

.wrapper {
   overflow:hidden;
   width:100%;
   max-width:1200px; // or whatever you want
   display:block;
   margin: 0 auto;
}

这将包含wrapper元素中的所有内容，并在屏幕尺寸大于1200px的情况下将其放在页面的中心。

此外，您的header和body元素当前具有固定的宽度，您应该从body中删除该属性，并为header提供基于百分比的宽度：

header {
   width:100%;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50562758

复制

相似问题

问使元素适合移动优先/媒体查询的问题
EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使元素适合移动优先/媒体查询的问题EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使元素适合移动优先/媒体查询的问题
EN