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
js behandelt die Kontoabmeldung beim Schließen des Browsers
Inhaltsverzeichnis Klassischer Ansatz Frage Weite...
So öffnen Sie Port 8080 auf dem Alibaba Cloud ECS-Server
Aus Sicherheitsgründen verfügt Alibaba Cloud Serv...
Detaillierte Erläuterung zur Verwendung von Amoeba zum Implementieren der Lese-/Schreibtrennung einer MySQL-Datenbank
Es gibt viele Lese-/Schreibtrennungsarchitekturen...
MySQL-Anfänger können sich von den Problemen der Gruppierungs- und Aggregationsabfragen verabschieden
Inhaltsverzeichnis 1. Schematische Darstellung de...
Trash-Cli: Befehlszeilen-Papierkorb-Tool unter Linux
Ich glaube, jeder kennt den Papierkorb, da er bei...
So zentrieren Sie Bilder horizontal und vertikal in DIV oder DIV
<div Klasse="Box"> <img /> ...
Eine kurze Diskussion über 12 klassische Probleme in Angular
Inhaltsverzeichnis 1. Erklären Sie bitte, was die...
Centos7-Installation des FFmpeg-Audio-/Video-Tools – einfaches Dokument
ffmpeg ist ein sehr leistungsfähiges Tool zur Aud...
Zusammenfassung einiger gängiger Möglichkeiten zum Abkürzen von Javascript-Code
Inhaltsverzeichnis Vorwort Pfeilfunktionen Beherr...
JavaScript zum Hinzufügen und Löschen von Nachrichten im Message Board
Dieser Artikel zeigt ein kleines Beispiel für das...
So legen Sie fest, dass der Text im Dropdown-Auswahlmenü nach links und rechts gescrollt wird
Ich möchte das Marquee-Tag verwenden, um das Scrol...
Detaillierte Erläuterung der für das Front-End erforderlichen Nginx-Konfiguration
Nginx (Engine x) ist ein leichter, leistungsstark...
React + Threejs + Swiper vollständiger Code zum Erzielen eines Panoramaeffekts
Schauen wir uns den Panorama-Effekt an: Adresse a...
Detaillierte Erklärung der Lösung für das Problem, dass die Schrift in HTML selbst mit line-height nicht vertikal zentriert werden kann
von Nehmen wir als Beispiel den im Bild gezeigten...
HTML-Tabellen-Markup-Tutorial (40): Dunkles Rahmenfarbattribut der Kopfzeile BORDERCOLORDARK
Im Tabellenkopf können Sie die dunkle Rahmenfarbe...