So verwenden Sie CSS-Medienabfragen mit einem geringeren Seitenverhältnis
|
CSS-Medienabfragen haben ein sehr praktisches Seitenverhältnis, das Aspektverhältnis, das Breite/Höhe direkt verwenden kann, um die Seite anzupassen. Das Anwendungsbeispiel lautet wie folgt:
// Das Seitenverhältnis liegt zwischen (（320/50）+(728/90))/2, um auf den Designstil 320*50 des @media-Bildschirms zu passen, und (min-aspect-ratio: ~"249/50") und (max-aspect-ratio: ~"29/4"){
@Basis: 320;
@konvertieren: 375/@base;
.Container{
Breite: 100vw;
Höhe: 100 %;
Position: relativ;
Anzeige: Flex;
flex-flow: Zeile nowrap;
Elemente ausrichten: zentrieren;
.info-Symbol-Box{
.width(46*@konvertieren);
.Höhe(46*@konvertieren);
.border-radius(10*@konvertieren);
.border(1@convert,#e3e3e3);
Überlauf: versteckt;
.margin-left(10*@konvertieren);
.min-Breite(46*@konvertieren);
.max-width(46*@konvertieren);
Flex-Wachstum: 0;
img {
Breite: 100 %;
Höhe: 100%;
.border-radius(10);
vertikale Ausrichtung: oben;
}
}
.info-andere{
Flex-Wachstum: 1;
Anzeige: Flex;
Flex-Flow: Spalte Nowrap;
Überlauf: versteckt;
Höhe: 100 %;
.margin-left(10*@konvertieren);
.info-wrap.roll-box{
Höhe: 200 %;
}
.info-box{
Breite: 100 %;
Höhe: 50 %;
Flex-Wachstum: 1;
Anzeige: Flex;
flex-flow: Zeile nowrap;
Elemente ausrichten: zentrieren;
.Info{
Breite: 48vw;
Höhe: 100%;
Flex-Wachstum: 1;
Anzeige: Flex;
//Elemente ausrichten: zentrieren;
Flex-Richtung:Spalte;
Inhalt ausrichten: zentriert;
.info-Titel{
Schriftstärke: fett;
.Schriftgröße(16*@convert);
.Zeilenhöhe(26*@konvertieren);
Farbe: #484848;
.margin-bottom(4*@konvert);
}
.info-andere-rate {
Anzeige: Flex;
Elemente ausrichten: zentrieren;
Inhalt ausrichten: Flex-Start;
Position: relativ;
z-Index: 2;
.Sternnummer{
.Schriftgröße(15*@convert);
Farbe: #4a4a4a;
.padding-right(5*@konvertieren);
}
.star-auswerten {
Position: relativ;
.Breite(100*@konvertieren);
.Höhe(16*@konvertieren);
Hintergrund: URL("../../assets/images/star_gray.png") keine Wiederholung 0 0;
Hintergrundgröße: Abdeckung;
Überlauf: versteckt;
.Stern {
Position: absolut;
oben: 0;
links: 0;
Anzeige: Inline-Block;
.Höhe(16*@konvertieren);
Hintergrund: URL("../../assets/images/star.png") keine Wiederholung 0 0;
Hintergrundgröße: Abdeckung;
Überlauf: versteckt;
}
.Stern-1 {
.width(8*@konvertieren);
}
.Stern-2 {
.width(21*@konvertieren);
}
.Stern-3 {
.width(29*@konvertieren);
}
.stern-4 {
.width(42*@konvertieren);
}
.Stern-5 {
.Breite(50*@konvertieren);
}
.stern-6 {
.width(63*@konvertieren);
}
.Stern-7 {
.width(71*@konvertieren);
}
.Stern-8 {
.width(84*@konvertieren);
}
.stern-9 {
.Breite(92*@konvertieren);
}
.stern-10 {
.Breite(100*@konvertieren);
}
}
}
.info-desc-box{
Anzeige: keine;
}
}
.info-install{
.min-Breite(66*@konvertieren);
Breite:Inhalt anpassen;
.Höhe(40*@konvertieren);
.Zeilenhöhe(40*@konvertieren);
Box-Größe: Rahmenbox;
.padding-all(0,4*@konvertieren,0,4*@konvertieren);
.Schriftgröße(14*@convert);
Farbe: #fff;
Textausrichtung: zentriert;
.margin-rechts(20*@konvertieren);
Hintergrund: URL("../../assets/images/btn_download_short_shadow.png") keine Wiederholung 0 0;
Hintergrundgröße: 100 % 100 %;
}
}
.info-desc-box {
Breite: 100 %;
Höhe: 50 %;
.padding-all(4*@konvertieren, 26*@konvertieren, 4*@konvertieren, 0);
Box-Größe: Rahmenbox;
Überlauf: versteckt;
.info-desc{
.Schriftgröße(14*@convert);
.Zeilenhöhe(20*@konvertieren);
Farbe: #484848;
.info-andere-Rate{
Anzeige: keine;
}
}
}
}
}
}
// Das Seitenverhältnis ist größer als (（320/50）+(728/90))/2. Der Mittelwert der beiden Größen ist für 728*90 geeignet. Designstil @media screen and (min-aspect-ratio: ~"29/4"){
@Basis: 728;
@konvertieren: 375/@base;
.Container{
Breite: 100vw;
Höhe: 100 %;
Position: relativ;
Anzeige: Flex;
flex-flow: Zeile nowrap;
Elemente ausrichten: zentrieren;
.info-Symbol-Box{
.Breite(88*@konvertieren);
.Höhe(88*@konvertieren);
.border-radius(10*@konvertieren);
.border(1@convert,#e3e3e3);
Überlauf: versteckt;
.margin-left(10*@konvertieren);
.min-Breite(88*@konvertieren);
.max-Breite(88*@konvertieren);
Flex-Wachstum: 0;
img {
Breite: 100 %;
Höhe: 100%;
.border-radius(10);
vertikale Ausrichtung: oben;
}
}
.info-andere{
Flex-Wachstum: 1;
Anzeige: Flex;
Flex-Flow: Spalte Nowrap;
Überlauf: versteckt;
Höhe: 100 %;
.margin-left(10*@konvertieren);
.info-wrap{
Höhe: 100 %;
.info-box{
Breite: 100 %;
Höhe: 100 %;
Flex-Wachstum: 1;
Anzeige: Flex;
flex-flow: Zeile nowrap;
Elemente ausrichten: zentrieren;
.Info{
Breite: 48vw;
Höhe: 100%;
Flex-Wachstum: 1;
Anzeige: Flex;
Flex-Richtung:Spalte;
Inhalt ausrichten: zentriert;
.margin-rechts(20*@konvertieren);
.info-Titel-Rate{
Anzeige: Flex;
Flex-Flow: Zeile Nowrap;
}
.info-Titel{
Schriftstärke: fett;
.Schriftgröße(24*@convert);
.Zeilenhöhe(37*@konvertieren);
Farbe: #484848;
.margin-bottom(4*@konvert);
}
.info-andere-rate {
Anzeige: Flex;
Elemente ausrichten: zentrieren;
Inhalt ausrichten: Flex-Start;
Position: relativ;
z-Index: 2;
.Sternnummer{
.Schriftgröße(15*@convert);
Farbe: #4a4a4a;
.padding-right(5*@konvertieren);
}
.star-auswerten {
Position: relativ;
.Breite(100*@konvertieren);
.Höhe(16*@konvertieren);
Hintergrund: URL("../../assets/images/star_gray.png") keine Wiederholung 0 0;
Hintergrundgröße: Abdeckung;
Überlauf: versteckt;
.Stern {
Position: absolut;
oben: 0;
links: 0;
Anzeige: Inline-Block;
.Höhe(16*@konvertieren);
Hintergrund: URL("../../assets/images/star.png") keine Wiederholung 0 0;
Hintergrundgröße: Abdeckung;
Überlauf: versteckt;
}
.Stern-1 {
.width(8*@konvertieren);
}
.Stern-2 {
.width(21*@konvertieren);
}
.Stern-3 {
.width(29*@konvertieren);
}
.stern-4 {
.width(42*@konvertieren);
}
.Stern-5 {
.Breite(50*@konvertieren);
}
.stern-6 {
.width(63*@konvertieren);
}
.Stern-7 {
.width(71*@konvertieren);
}
.Stern-8 {
.width(84*@konvertieren);
}
.stern-9 {
.Breite(92*@konvertieren);
}
.stern-10 {
.Breite(100*@konvertieren);
}
}
}
.info-desc-box {
Breite: 100 %;
.Höhe(20*@konvertieren);
.padding-all(4*@konvertieren, 26*@konvertieren, 4*@konvertieren, 0);
Box-Größe: Rahmenbox;
Überlauf: versteckt;
.info-desc{
.Schriftgröße(14*@convert);
.Zeilenhöhe(20*@konvertieren);
Farbe: #484848;
.info-andere-Rate{
Anzeige: keine;
}
}
.roll-box{
Höhe: automatisch;
}
}
}
.info-install{
.min-Breite(66*@konvertieren);
Breite:Inhalt anpassen;
.Höhe(40*@konvertieren);
.Zeilenhöhe(40*@konvertieren);
Box-Größe: Rahmenbox;
.padding-all(0,4*@konvertieren,0,4*@konvertieren);
.Schriftgröße(14*@convert);
Farbe: #fff;
Textausrichtung: zentriert;
.margin-rechts(20*@konvertieren);
Hintergrund: URL("../../assets/images/btn_download_short_shadow.png") keine Wiederholung 0 0;
Hintergrundgröße: 100 % 100 %;
}
}
}
&.info-desc-box {
Anzeige: keine;
}
}
}
}Beachten Sie drei Punkte: 1. Das Seitenverhältnis muss in Form eines Verhältnisses angegeben werden. Sie können keine Dezimalzahl direkt schreiben. Breite/Höhe 2. Das Seitenverhältnis direkt in Less zu schreiben, funktioniert nicht, da Less es in eine Dezimalzahl kompiliert. Sie können vor dem Verhältnis ein ~ hinzufügen, um es perfekt zu lösen. 3. Vermeiden Sie Stilüberlagerungen. Große Teile der Media Queries schreiben Sie am besten ans Ende. Zusammenfassen Oben ist die vom Editor eingeführte Verwendung der CSS-Medienabfrage „Aspect-Ratio Less“ zu sehen. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: So verwenden Sie Maxwell zum Synchronisieren von MySQL-Daten in Echtzeit
>>: Stimmt es, dass der Webdesign-Stil umso besser ist, je einfacher er ist?
Artikel empfehlen
Das mobile Vue-Terminal realisiert den Finger-Gleiteffekt
In diesem Artikelbeispiel wird der spezifische Co...
Bereitstellungs- und Installationsdiagramm für die Servervirtualisierung von VMware vSphere 6.0 (detaillierte Schritte)
1. Wichtige Punkte für die frühzeitige Planung de...
Detaillierte Erklärung zur Verwendung der Vue h-Funktion
Inhaltsverzeichnis 1. Verstehen 2. Verwendung 1. ...
Lösung für das HTML-Kodierungsproblem in IE6, das zu JS-Fehlern und nicht angewendetem CSS führt
Im Test wurde festgestellt, dass wenn die Seitende...
docker-maven-plugin verpackt das Image und lädt es in ein privates Warehouse hoch
Inhaltsverzeichnis 1. Einführung in das Docker-Ma...
Beispielcode zur Implementierung komplexer Tabellenüberschriften in HTML-Tabellen
Verwenden Sie HTML, um komplexe Tabellen zu erste...
Beispiele für die MySQL-Verschlüsselung und -Entschlüsselung
Beispiele für die MySQL-Verschlüsselung und -Ents...
CSS zur Erzielung eines schwebenden Kundenservice-Effekts
<div Klasse="Seitenleiste"> <d...
Einführung in 10 Online-Entwicklungstools für Webdesign
1. Online-Textgenerator BlindTextGenerator: Für D...
Kostenlose MySQL-Installationsversion (zip) – ausführliches Tutorial zur Installation und Konfiguration
In diesem Artikel finden Sie das Installations- u...
CSS-Pseudoklasse: empty makes me shine (Beispielcode)
Jeder, der meine Artikel in letzter Zeit gelesen ...
Eine kurze Diskussion über Shallow Copy und Deep Copy in JavaScript
Inhaltsverzeichnis 1. Direkte Zuordnung 2. Oberfl...
jQuery implementiert das Klicken auf die linke und rechte Schaltfläche zum Wechseln von Bildern
In diesem Artikelbeispiel wird der spezifische Co...
Erläuterung des Arbeitsmechanismus von Namenode und SecondaryNameNode in Hadoop
1) Prozess 2) FSImage und Bearbeitungen Nodenode ...
Detaillierte Erläuterung mehrerer Möglichkeiten zum Schreiben privater Variablen der ES6-Implementierungsklasse
Closure-Implementierung privater Variablen Privat...