Überprüfung der Verwendung des responsiven CSS3-Layoutdesigns
Mar 15, 2017 am 09:42 AMResponsive 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.
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.
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!

Heißer Artikel

Hot-Tools-Tags

Heißer Artikel

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen

Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework

Machen Sie Ihren ersten Seltsamen -Sufle -Übergang

Entmystifizierende Bildschirmleser: Zugrunde Formen und Best Practices

Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte)
