Überprüfung der Verwendung des responsiven CSS3-Layoutdesigns

Responsive Design bedeutet, dass der Anzeigestil je nach Auflösung der verschiedenen Geräte unterschiedlich ist.
　Medien Attribut wird verwendet, um verschiedene Stile für verschiedene Medientypen anzugeben. Rendern Sie die Seite unabhängig von der Breite und Höhe des Browsers neu.
Syntax: @media mediatype und |. nicht nur (Medienfunktion) {}
<link rel="stylesheet" media="screen und (
max-width : 600px)" href="small.css"/>　 Ergebnis: Wenn die Auflösung auf 600 erhöht wird, werden die Stile in diesem Stylesheet angezeigt.

Medientyp:

alle für alle Geräte

Druckenfür Drucker und Druckgeräte

Bildschirm für Computerbildschirme, Tablets, Smartphone.

　 　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 vom Betreiber bestellt

　　　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　.　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　loguendiary(code) |

　　　@media screen and (max-width : 600px) {

　　　　 /* Passt zu Computerbildschirmen mit einer Breite von weniger als 600px*/

　　　}　Das Schlüsselwort not wird verwendet, um einen bestimmten institutionellen Medientyp ausschließen.

　　　@Medien werden nicht gedruckt {

　　　　/*Alle Geräte außer Druckern abgleichen*/
　　　}
　　nur wird verwendet, um einen bestimmten Medientyp anzugeben.

　　　@Medien nur Bildschirm und (

min-width
:
300
) und (max-width:500){
　　　 /*Dieser Absatz gilt nur für Geräte mit Farbbildschirm* /
　　}Medieneigenschaften: (häufig verwendet)　　　 max-width(
max-height
): Maximale Breite und maximale Höhe

@media (max-width: 600px) {

　　　 Passen Sie Geräte mit einer Schnittstellenbreite von weniger als 600px an

　　　}　min-width(min-height

): Mindestbreite und -höhe

@media (min-width: 400px) {
　　　 Passen Sie Geräte mit einer Schnittstellenbreite von mehr als 400px an
　　　}
　 Max-device-width(max-device-height) Maximale Breite und Höhe des Geräts @media (max-device-width: 800px) { 　　　　 Passen Sie Geräte (keine Schnittstellen) mit einer Breite von weniger als 800px an
　　　}
　　min-device-width(min-device-height): Die maximale Breite des Geräts und der Höhe
　　　@media (min-device-width: 600px) {
　　　 Passen Sie Geräte (keine Schnittstellen) mit einer Breite von mehr als 600px an
　　　}
　　Ausrichtung: Hochformat, vertikaler Bildschirm
<link rel ="stylesheet" media="all and
　 (orientation:portrait)"
href="indexa.css"/>
Ergebnis: Diesen Stil im Hochformat anzeigen
Ausrichtung :Querformat horizontaler Bildschirm
Formel

Das obige ist der detaillierte Inhalt vonÜberprüfung der Verwendung des responsiven CSS3-Layoutdesigns. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!