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
Anweisungen zur verschachtelten Verwendung von MySQL ifnull
Verschachtelte Verwendung von MySQL ifnull Ich ha...
Zusammenfassung der sieben grundlegenden XHTML-Codierungsregeln
1. Alle Tags müssen ein entsprechendes End-Tag hab...
Zusammenfassung verschiedener Methoden zur Implementierung von Artikeltrennlinienstilen mit CSS
Dieser Artikel fasst verschiedene Möglichkeiten z...
Verwenden von js, um einen Wasserfalleffekt zu erzielen
In diesem Artikelbeispiel wird der spezifische Co...
Tastenkombinationsvorgang für SQL Server-Kommentare
Batchkommentare in SQL Server Batch-Annotation St...
js realisiert den Effekt des Tanabata-Geständnisfeuers, jQuery realisiert die Feuerfeuertechnologie
In diesem Artikel wird die Verwendung von js- und...
Implementierungsprozess des Nginx-Hochverfügbarkeitsclusters
Dieser Artikel stellt hauptsächlich den Implement...
Die Verwendung von Ankerpunkten in HTML_PowerNode Java Academy
Lassen Sie uns nun mehrere Situationen zur Steuer...
Eine sehr detaillierte Zusammenfassung der Kommunikation zwischen Vue-Komponenten
Inhaltsverzeichnis Vorwort 1. Props, $emit Einweg...
Detaillierte Erläuterung des MySQL-Redo-Logs (Redo-Log) und des Rollback-Logs (Undo-Log)
Vorwort: Im vorherigen Artikel wurden mehrere all...
IDEA2020.1.2 Detailliertes Tutorial zum Erstellen eines Webprojekts und Konfigurieren von Tomcat
Dieser Artikel ist ein integrierter Artikel zum E...
Detaillierte Erklärung der Box-Größe in CSS3 (Content-Box und Border-Box)
Box-Größe in CSS3 (Inhaltsbox und Rahmenbox) Mit ...
Erste Schritte mit dem Alibaba Cloud ECS-Server (unbedingt zu lesendes Tutorial für Neulinge)
1. Alibaba Cloud wählt den geeigneten Cloud-Serve...
Erfahren Sie mehr über MySQL-Datenbanken
Inhaltsverzeichnis 1. Was ist eine Datenbank? 2. ...
CSS- und HTML- und Front-End-Technologie-Schichtendiagramm
Die Beziehung zwischen Javascript und DOM ist seh...