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
XHTML-Tags, die durch den Ort der Verwendung leicht verwechselt werden können
<br />Wir haben in unseren Artikeln bei jb51...
Detailliertes Tutorial zur Konfiguration von Docker nginx + https-Subdomains
Heute habe ich zufällig einem Freund beim Umzug s...
Detaillierte Erklärung zur Verwendung von Join zur Optimierung von SQL in MySQL
0. Bereiten Sie relevante Tabellen für die folgen...
Detaillierte Erklärung der Verwendung von 5 verschiedenen Werten der CSS-Position
Die Position-Eigenschaft Die Positionseigenschaft...
Einführung in die MySQL-Optimierung für die Unternehmensproduktion
Im Vergleich zu anderen großen Datenbanken wie Or...
HTML erlaubt teilweise erzwungene Bildlaufleisten, um den Gesamtstil und das Layout nicht zu zerstören.
Poste zuerst das Effektbild: Damit der Gesamtstil ...
Eine Aufzeichnung der Fallstricke des Lebenszyklus von WeChat-Applet-Komponenten
Der Komponentenlebenszyklus ist normalerweise der...
So zeigen Sie Bildinformationen in Docker an
In diesem Artikel müssen wir lernen, wie man Bild...
HTML-Formular-Tag-Tutorial (5): Textfeld-Tag
<br />Mit diesem Tag können Sie ein mehrzeil...
Beispiel für die Implementierung der Drittanbieter-Autorisierungsmethode von GitHub in Vue
Inhaltsverzeichnis Erstellen von OAuth-Apps Holen...
Allgemeiner HTML-Seitenstil (empfohlen)
Wie unten dargestellt: XML/HTML-CodeInhalt in die...
CSS imitiert Fernbedienungstasten
Hinweis: Diese Demo wurde in der Miniprogrammumge...
Detaillierte Erklärung zur Verwendung des Arguments-Objekts in JavaScript
Inhaltsverzeichnis Vorwort Grundlegende Konzepte ...
Beispiel für das Erreichen eines Deckeneffekts mit dem WeChat-Applet
Inhaltsverzeichnis 1. Umsetzung 2. Probleme 3. Üb...
Springboot verwendet die Front-End- und Back-End-Interaktion von Vue + Echarts, um dynamische Donut-Diagramme zu realisieren
Inhaltsverzeichnis Vorwort 1. Umgebungskonfigurat...