Test der abschirmenden Bildschirme | Twitter Bootstrap

Hallo Freunde testen nur Reaktionsfähigkeit meiner Website.Test der abschirmenden Bildschirme | Twitter Bootstrap

Also habe ich einen grundlegenden Code gemacht, in der Hoffnung, Titel in den Seiten werden für unterschiedliche Bildschirmgröße reagiert werden.

hier ist der HTML-Code,

<!-- Custom styles for this template --> 

<link rel="stylesheet" type="text/css" href="style.css"> 
<title>Testing Responsive Screens</title> 
</head> 

<body> 

<div class='divHeader'><!-- Contact Us title Start --> 

    <div class="container"><!--container--> 

     <div class="row"><!-- Contact Us title --> 

      <!-- LARGE SCREEN TITLE --> 

      <div class='LGS'> 

       <div class='col-lg-4'></div> 

       <div class='col-lg-4 divHeaderContent text-center'> 
        <h1><br>Contact Us</h1> 
       </div> 

       <div class='col-lg-4'></div> 

      </div> 

      <!-- MEDIUM SCREEN TITLE --> 

      <div class='MDS'> 

       <div class='col-md-4'></div> 

       <div class='col-md-4 divHeaderContent text-center'> 
        <h2><br>Contact Us</h2> 
       </div> 

       <div class='col-md-4'></div> 

      </div> 

      <!-- SMALL SCREEN TITLE --> 

      <div class='SMS'> 

       <div class='col-sm-4'></div> 

       <div class='col-sm-4 divHeaderContent text-center'> 
        <h3><br>Contact Us</h3> 
       </div> 

       <div class='col-sm-4'></div> 

      </div> 

      <!-- EXTRA SMALL 1 SCREEN TITLE --> 

      <div class="XSS1"> 

       <div class='col-xs-4'></div> 

       <div class='col-xs-4 divHeaderContent text-center'> 
        <h4><br>Contact Us</h4> 
       </div> 

       <div class='col-xs-4'></div> 

      </div> 

      <!-- EXTRA SMALL 2 SCREEN TITLE --> 

      <div class="XSS2"> 

       <div class='col-xs-4'></div> 

       <div class='col-xs-4 divHeaderContent text-center'> 
        <h6><br>Contact Us</h6> 
       </div> 

       <div class='col-xs-4'></div> 

      </div> 

     </div><!-- End of Contact Us title --> 

    </div><!--End of container--> 

</div> 

</body> 

</html>

& die einfache CSS,

@media (min-width: 1200px) { 
    /* ================== GENERAL RULE ===================== */ 
    .MDS, .SMS, .XSS1, .XSS2{ 
     display: none;  
    } 
} 

    /* Landscape tablets and medium desktops */ 
     @media (min-width: 992px) and (max-width: 1199px) { 
     /* ================== GENERAL RULE ===================== */ 
     .LGS, .SMS, .XSS1, .XSS2{ 
      display: none;  
     } 
    } 

    /* Portrait tablets and small desktops */ 
    @media (min-width: 768px) and (max-width: 991px) { 
     /* ================== GENERAL RULE ===================== */ 
     .LGS, .MDS, .XSS1, .XSS2{ 
      display: none;  
     } 
    } 

    /* Landscape phones and portrait tablets */ 
    @media (max-width: 767px) { 
     /* ================== GENERAL RULE ===================== */ 
     .LGS, .MDS, .SMS, .XSS2{ 
      display: none;  
     } 
    } 

    /* Portrait phones and smaller */ 
    @media (max-width: 480px) { 
     /* ================== GENERAL RULE ===================== */ 
     .LGS, .MDS, .SMS, .XSS1{ 
      display: none;  
     } 
    }

Klassen gewidmet sind jeder Größe Typ Bildschirm.

Problem tritt in der kleinsten Bildschirmgröße auf. Der Titel erscheint einfach nicht. Hilf mir Leute, lass mich wissen, ich gehe falsch.

Danke!

Quelle

2016-06-03 Gaurav

Das Problem ist, dass Sie keine Mindestbreite für Landscape phones and portrait tablets angeben. Also bei 767px und weniger ist XSS2 sowieso versteckt (auch in 'Portrait phones und kleiner' Fall). Es gibt ein fix:

/* Landscape phones and portrait tablets */ 
@media (min-width: 481px) and (max-width: 767px) { 
    /* ================== GENERAL RULE ===================== */ 
    .LGS, .MDS, .SMS, .XSS2{ 
     display: none;  
    } 
}

Quelle

2016-06-03 09:34:45 wander

danke Kumpel, das hat funktioniert !! – Gaurav

Gern geschehen :) – wander

sehen, ob dies für Sie arbeitet: http://codepen.io/panchroma/pen/LZVyPQ, es ist ein wenig leichter zu folgen, was in den verschiedenen Ansichtsfenstern geschieht, wenn Sie alle Ihre benutzerdefinierten Klassen verstecken, dann angeben, welche DISPLA y für jeder Haltepunkt, im Gegensatz zur Angabe , die an jedem Haltepunkt verbergen.

.LGS, .MDS, .SMS,.XSS1, .XSS2{display:none;} 

@media (max-width: 480px) { 
    .XSS2{ 
    display:block; 
    } 
} 

@media (min-width: 481px) and (max-width: 767px) { 
    .XSS1{ 
    display:block; 
    } 
} 

@media (min-width: 768px) and (max-width: 991px) { 
    .SMS{ 
    display:block; 
    } 
} 

@media (min-width: 992px) and (max-width: 1199px) { 
    .MDS{ 
    display:block; 
    } 
} 

@media (min-width: 1200px) { 
    .LGS{ 
    display:block; 
    } 
}

Falls Sie nicht wissen, tut Bootstrap nativen ansprechbar Dienstprogramme haben, die einige erreichen können, was Sie suchen: http://getbootstrap.com/css/#responsive-utilities

Auch ist es aus dem Code nicht klar ist, wenn Sie haben ein gehören viewport meta tag im Kopf Ihres Dokuments, wenn Sie nicht so etwas wie

<head> 
... 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
... 
</head>

Viel Glück brauchen!

Quelle

2016-06-03 16:57:49

Test der abschirmenden Bildschirme | Twitter Bootstrap

Antwort

Verwandte Themen