Mit der Entwicklung der Zeit gibt es immer mehr mobile Geräte. Früher mussten Front-End-Ingenieure zwei Codesätze für eine Seite schreiben, einen für den PC und einen für Mobilgeräte Der Satz an Codes reicht aus, da wir die Medienabfrage, also die @media-Methode, verwenden können. Als Nächstes stelle ich Ihnen mehrere Schlüssellösungen für die Medienabfrage vor Bedürftige können sich darauf berufen. Ich habe oft Kopfschmerzen wegen falsch ausgerichteter Layouts auf Geräten mit unterschiedlichen Auflösungen oder unterschiedlichen Fenstergrößen. Sie können @media screen verwenden, um ein adaptives Weblayout zu erreichen, aber die Kompatibilität mit allen gängigen Geräten wird zum Problem. Wie hoch ist die Auflösung bei der Einstellung?
1. Sehen Sie sich zunächst den folgenden Code an, der vom Bootstrap durchlaufen wird. Die zu bestätigende Mindestbreite beträgt
768, 992 und 1200. Natürlich hatten einige Geräte in der Vergangenheit eine Breite von 600-480, und wir haben diejenigen mit kleinen Auflösungen als weniger als 767 eingestuft. Warum ist es kleiner als 767 statt 768? Das liegt daran, dass @media (min-width: 768px) bedeutet, dass das Minimum 768 ist, was hier gleich ist, also verwenden wir @media (max-). Breite: 767px) bedeutet hier
2. Verwenden Sie @media, um mehrere wichtige Lösungen bei der Webseitenanpassung zu realisieren
Aus dem Obigen können wir ersehen, dass es mehrere kritische Punktauflösungen gibt, dann können wir ganz einfach unseren eigenen adaptiven Code schreiben
@media (min-width: 768px) { //>=768 device}
@media (min-width: 992px){ //>=992 Gerät}
@media (min-width: 1200) { //>=1200 Gerät}
Achten Sie auf die Reihenfolge, wenn Sie unten @media (min-width: 768px) schreiben, wird es sehr tragisch sein,
@media (min-width: 1200){ //>=1200 Gerät}
@media (min-width: 992px){ //>=992 device}
@media (min-width: 768px){ //>=768 device}
Denn wenn es 1440 ist, da 1440>768, ist Ihre 1200 ungültig.
Wenn wir also „Min-Breite“ verwenden, sind die kleinen oben und die großen unten. Wenn wir also „Max-Breite“ verwenden, sind die großen oben und die kleinen unten unten
@media (max-width: 1199){ //
@media (max-width: 991px){ //
@media (max-width: 767px){ //
3. Nach dem oben genannten Einführungslernen können wir erweiterte Hybridanwendungen flexibel nutzen
@media screen and (min-width:1200px){ #page{ width: 1100px }#content,.div1{width: 730px;}#secondary{width:310px} }
@media screen and (min-width: 960px) und (max-width: 1199px) { #page{ width: 960px; }#content,.div1{width: 650px;}#secondary{width:250px}select{max-width:200px} }
@media screen und (min-width: 768px) und (max-width: 959px) { #page{ width: 900px; }#content,.div1{width: 620px;}#secondary{width : 220px}select{max-width:180px} }
@media only screen and (min-width: 480px) and (max-width: 767px){ #page{ width: 450px }#content, . div1{width: 420px; position: relative; }#secondary{display:none}#access{width: 450px }#access a img{display:none}#rss{display : none}#branding #s{display:none} }
@media only screen and (max-width: 479px) { #page{ width: 300px; }#content,.div1{width: 300px; } #secondary{display:none}#access{width: 330px;} #access a {padding-right:10px;padding-left:10px}#access a img{display:none}#rss{display:none}#branding # s{display:none}#access ul ul a{width:100px} }
Zusammenfassung: Im obigen Code wird der Monitor als Anzeigegerät angegeben, es können aber auch andere Geräte sein Wie zum Beispiel Druckdrucker. Im Allgemeinen verwenden wir Bildschirmdrucker. Oder ganz weglassen. Wenn Sie eine detaillierte Erklärung zu Medien sehen möchten, können Sie Baidu nutzen, um mehr über Medienabfragen zu erfahren.
Das obige ist der detaillierte Inhalt vonGeben Sie einige Medienabfragen an @media weiter, um adaptive Schlüsselauflösungen zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
