2017-11-28 1 views
0

Es gibt Bootstrap-3 Medien StützpunkteBootstrap Medien Haltepunkte

/*========== Mobile First Method ==========*/ 

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) { 

} 

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { 

} 

/* Small Devices, Tablets */ 
@media only screen and (min-width : 768px) { 

} 

/* Medium Devices, Desktops */ 
@media only screen and (min-width : 992px) { 

} 

/* Large Devices, Wide Screens */ 
@media only screen and (min-width : 1200px) { 

} 

/*========== Non-Mobile First Method ==========*/ 

/* Large Devices, Wide Screens */ 
@media only screen and (max-width : 1200px) { 

} 

/* Medium Devices, Desktops */ 
@media only screen and (max-width : 992px) { 

} 

/* Small Devices, Tablets */ 
@media only screen and (max-width : 768px) { 

} 

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) { 

} 

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) { 

} 

Ich verstehe einfach nicht, warum in der mobilen ersten min-width und max-width in nicht-mobile als gleich beschrieben. Ich meine zum Beispiel minimale Breite für Tabletten = 768px, so bedeutet es alle Breiten> 768, und in der maximalen Breite 768 für Tabletten auch, aber es bedeutet < 768px, es sieht aus wie Reichweite für Tabletten in Mobile-First = 768-991px und in nicht-mobilen 481-768

Antwort

0

Bootstrap und im Allgemeinen alle Medienabfragen definieren in der Regel Width Breakpoints mit Bereichen. In diesem Fall sind Breakpoints mit demselben Headerkommentar in dem von Ihnen gezeigten css Synonyme.

Sie können wie folgt aus (zum Beispiel) mit den beiden Optionen besser definieren:

/* Extra Small Devices, Phones */ 
@media only screen and (max-width: 480px) and (min-width: 321px) { } 

Sie können auch mit anderen Selektoren (und die Möglichkeit sich zu verketten), um die Bildschirmposition oder andere Parameter zu spezifizieren. Hier sind einige davon:

  • Höhe
  • Orientierung
  • Farbindex
  • monochrome
  • Auflösung
  • scan
  • grid