Flexibles CSS-Layout FLEX, Medienabfrage und Implementierung von mobilen Klickereignissen
flexibles Layout Definition: Das Element des Standardmäßig hat ein Container zwei Achsen: die horizontale Die Startposition der Hauptachse (der Schnittpunkt mit der Grenze) wird Standardmäßig werden die Elemente entlang der Hauptachse angeordnet. Der von einem einzelnen Element eingenommene Hauptachsenraum wird
So verwenden Sie ein flexibles Layout: Legen Sie einfach Containereigenschaften
.Kasten
{
Flex-Richtung: Zeile | Zeile umkehren | Spalte | Spalte umkehren;
}Reihe Reihe umkehren Spalte Spaltenumkehr
<Stil>
ul:n-ter-vom-Typ(1){ flex-direction:row;}
ul:n-ter-vom-Typ(2){ flex-direction:row-reverse;}
ul:n-ter-vom-Typ(3){flex-direction:column;}
ul:n-ter-vom-Typ(4){flex-direction:column-reverse;}
</Stil>
.Kasten
{
Flex-Wrap: Nowrap | Wrap | Wrap-Reverse;
}jetztrap wickeln Wrap-Rückseite
<Stil>
ul:n-ter-vom-Typ(1){flex-wrap:nowrap;}
ul:n-ter-vom-Typ(2){flex-wrap:wrap;}
ul:n-ter-vom-Typ(3){flex-wrap:wrap-reverse;}
</Stil>
.Kasten
{
Inhalt ausrichten: Flex-Start | Flex-Ende | Mitte | Abstand dazwischen | Abstand drumherum;
}Flex-Start Flex-Ende Center Zwischenraum Raum-herum
<Stil>
ul:n-ter-vom-Typ(1){justify-content:flex-start;}
ul:n-ter-Typ(2){justify-content:flex-end;}
ul:nth-of-type(3){justify-content:center;}
ul:nth-of-type(4){justify-content:space-between;}
ul:nth-of-type(5){justify-content:space-around;}
</Stil>
Flex-Start Flex-Ende Center Basislinie strecken
<Stil>
ul:n-ter-vom-Typ(1){align-items:flex-start;}
ul:n-ter-vom-Typ(2){align-items:flex-end;}
ul:n-ter-von-Typ(3){align-items:center;}
ul:n-ter-von-Typ(4){align-items:baseline;}
ul li{ Höhe:auto;}
ul:n-ter-von-Typ(5){align-items:stretch;}
</Stil>
Flex-Start Flex-Ende Center Zwischenraum Raum-herum strecken
<Stil>
ul:n-ter-vom-Typ(1){ flex-wrap:wrap; align-content:flex-start;}
ul:n-ter-vom-Typ(2){ flex-wrap:wrap; align-content:flex-end;}
ul:n-ter-vom-Typ(3){flex-wrap:wrap;align-content:center;justify-content:center;}
ul:n-ter-vom-Typ(4){ flex-wrap:wrap; align-content:space-between;}
ul:n-ter-vom-Typ(5){ flex-wrap:wrap; align-content:space-around;}
ul li{ Höhe:auto;}
ul:n-ter-vom-Typ(6){flex-wrap:wrap;align-content:stretch;justify-content:center;}
</Stil>
Kurzform: Projekteigenschaften
<Stil>
ul li:nth-of-type(3){order:1;}
ul li:nth-of-type(2){order:2;}
ul li:n-ter-Typ(1){Reihenfolge:3;}
ul li:n-ter-Typ(5){order:4;}
ul li:n-ter-Typ(4){order:5;}
</Stil>
<Stil>
ul li:n-ter-vom-Typ(1){ flex-grow:1;}
ul li:n-ter-vom-Typ(2){ flex-grow:1;}
</Stil>
Wenn Wenn Negative Werte sind für diese Eigenschaft ungültig.
<Stil>
ul li:n-ter-Typ(1){flex-shrink:0;}
ul li:n-ter-Typ(2){flex-shrink:1;}
ul li:n-ter-Typ(3){flex-shrink:2;}
ul li:n-ter-Typ(4){flex-shrink:3;}
</Stil>
<Stil>
ul li:n-ter-Typ(1){ flex-basis:50%;}
</Stil>
Mit
<Stil>
ul{align-items:flex-start;}
ul li{height: auto}
ul li:nth-of-type(1){ align-self:auto;}
ul li:nth-of-type(2){ align-self:flex-start;}
ul li:nth-of-type(3){ align-self:center; }
ul li:nth-of-type(4){ align-self:flex-end;}
ul li:nth-of-type(5){ align-self:baseline;Zeilenhöhe: 80px;}
ul li:nth-of-type(6){ align-self:stretch;}
</Stil>
Diese Eigenschaft hat zwei Kurzwerte: Es wird empfohlen, diese Eigenschaft zu verwenden, anstatt drei separate Eigenschaften separat zu schreiben, da der Browser die relevanten Werte ableitet. Medienanfragen
<!DOCTYPE html>
<html>
<Kopf>
<Titel></Titel>
</Kopf>
<Text>
</body>
<Skripttyp="text/javascript">
/*
Ansichtsfenster
Definition: Der Ansichtsbereich ist der Bereich auf dem Gerätebildschirm, der zum Anzeigen unserer Webseite verwendet werden kann. 1px in CSS ist aufgrund unterschiedlicher Pixeldichten nicht gleich 1px auf dem Gerät. Layout-Ansichtsbereich: Layout-Ansichtsbereich. Im Allgemeinen legen Browser auf Mobilgeräten standardmäßig einen Ansichtsbereich-Metatag fest, um einen virtuellen Layout-Ansichtsbereich zu definieren, der verwendet wird, um das Anzeigeproblem früher Seiten auf Mobiltelefonen zu lösen. Visueller Ansichtsbereich: Der visuelle Ansichtsbereich legt den sichtbaren Bereich des physischen Bildschirms fest, die physischen Pixel, die auf dem Bildschirm angezeigt werden. Geräte mit hoher Pixeldichte können auf demselben Bildschirm mehr Pixel anzeigen. Idealer Ansichtsbereich: Der ideale Ansichtsbereich wird durch den Metatag ermittelt. Beispiel: <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0">
* Mobiles Layout * Der Wert des Inhaltsattributs des Meta-Tags * Breite = Gerätebreite, Höhe = Gerätehöhe, stellen Sie die aktuelle Breite und Höhe des Ansichtsfensters gleich der Breite und Höhe des Geräts ein. Sie können auch einen festen Wert festlegen und versuchen, die Höhe nicht zu verwenden
* Anfangsmaßstab = 1,0; Initialisierungsmaßstab: 0,25-1,0
* maximum-scale=1.0; Maximales Zoomverhältnis festlegen: 0,25-1,0
* minimum-scale=1.0; Legen Sie das minimale Skalierungsverhältnis fest: 0,25-1,0
* user-scalable=no; ob Benutzerskalierung erlaubt ist, die Standardeinstellung ist „yes“, wenn auf „no“ gesetzt: dann werden Minimax-Scale und Maximum-Scale ignoriert, weil Skalierung nicht erlaubt ist * Beispiel:
* <meta id="viewport" name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1,0, Maximalmaßstab=1, benutzerdefiniert skalierbar=nein">
* Mobile Gestenereignisse * Unterschiede zu PC-Ereignissen * PC-Mausbewegung, Maus hoch, Maus runter schlagen auf Mobilgeräten fehl oder funktionieren abnormal * PC-Klickereignisse können verwendet werden. | Sprechen Sie nicht über das 300-ms-Problem | Es wird jedoch ein Problem mit einer Verzögerung von 300 ms geben: Frühe Mobiltelefone: Wird verwendet, um zu bestimmen, ob zum Vergrößern oder Verkleinern ein Doppelklick erforderlich ist *
* Ereignisse auf mobilen Endgeräten* touchstart: ausgelöst durch Fingerdruck* touchmove: ausgelöst durch Bewegung des Fingers* touched: ausgelöst durch Wegnahme des Fingers* touchcancel: ausgelöst bei Unterbrechung des Ereignisses*
* Reihenfolge der Ausführung mobiler Ereignisse: touchstart->touchmove->touched->click
*
* Das touchEvent-Objekt hat im Vergleich zum PC-Ereignis drei weitere TouchList-Eigenschaften. * touches ist eine Liste aller Finger auf dem aktuellen Bildschirm. * targetTouches ist eine Liste der Finger auf dem aktuellen DOM-Objekt. * changedTouhes ist eine Liste der Fingerobjekte, die ihren Status geändert haben. *
* Jede TouchList hat mehrere Objekte und jedes Touch-Objekt hat die folgenden Objekteigenschaften: * screenX: Abstand von der linken Seite des Bildschirms * screenY: Abstand vom oberen Bildschirmrand * clientX: Abstand von der linken Seite des Browsers * clientY: Abstand vom oberen Browserrand * pageX: Abstand von der linken Seite der Seite * pageY: Abstand vom oberen Seitenrand * target: aktuell berührtes Element * identifier: ID des aktuellen Touch-Objekts, wird zur Identifizierung des Fingers verwendet * radiusX, radiusY: Bereich der Fingerberührung */
</Skript>
<style type="text/css">
/*Medienabfrage eins*/
* {
Rand: 0;
Polsterung: 0;
}
Körper {
Hintergrundfarbe: rosa;
}
/*Verwenden Sie @media Query, um reaktionsfähige Layouteffekte zu erzielen, und legen Sie je nach Bedingungen unterschiedliche Stile fest*/
/*Bildschirm bedeutet Bildschirm, min-width: 1200px bedeutet, dass die Mindestbreite 1200px beträgt. Mit anderen Worten, was ist der Stil, wenn die Bildschirmbreite größer oder gleich 1200px ist*/
@media nur Bildschirm und (min-width:1200px) {
/*Schreiben Sie hier den Stil*/
Körper {
Hintergrundfarbe: rot;
}
}
/*Stil, der angezeigt wird, wenn die Bildschirmbreite größer als 800 und kleiner als 1199 ist*/
@media only screen und (min-width: 800px) und (max-width: 1199px) {
Körper {
Hintergrundfarbe: Aqua;
}
}
/*Stil, der angezeigt wird, wenn die Bildschirmbreite größer als 400 und kleiner als 640 ist*/
/*//Wenn in der Medienabfrage kein verbundener Teil vorhanden ist, wird der Standardteil angezeigt*/
@media only screen und (min-width: 400px) und (max-width: 640px) {
Körper {
Hintergrundfarbe: gelb;
}
}
</Stil>
<!--
Medienabfrage 2 <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0">
<link rel="stylesheet" href="css/m320.css" media="nur Bildschirm und (max-width:320px)">
<link rel="stylesheet" href="css/m375.css" media="nur Bildschirm und (min-width:321px) und (max-width:375px)">
<link rel="stylesheet" href="css/m414.css" media="nur Bildschirm und (min-width:376px) und (max-width:414px)">
-->
</html>Mobiles Klickereignis
<!DOCTYPE html>
<html>
<Kopf>
<Titel></Titel>
</Kopf>
<Text>
</body>
<Skripttyp="text/javascript">
// Mobile Gesten var box = document.querySelector('#box')
// PC-seitiges Klickereignis box.addEventListener('click', function(e) {
console.log('===========klicken=============');
konsole.log(e);
});
//Mit dem Finger drücken box.addEventListener('touchstart', function(e) {
Konsole.log('===========touchstart=============');
// Fn(e);
})
//Fingerbewegung box.addEventListener('touchmove', function(e) {
Konsole.log('==========touchmove=============');
Fn(e);
})
//Finger erhoben box.addEventListener('touchend', function() {
console.log('============touchend===========');
});
//Nach Unterbrechung starten box.addEventListener('touchcancel', function() {
Warnung ('============unterbrochen=================');
})
var touchesH1 = document.querySelector('#box h1:n-ter-Typ(1)');
var targettouchesH1 = document.querySelector('#box h1:n-ter-Typ(2)');
var changetouchesH1 = document.querySelector('#box h1:n-ter-Typ(3)');
Funktion Fn(e) {
touchesH1.innerHTML = "berührt" + e.touches.length;
targettouchesH1.innerHTML = "targettouches" + e.targetTouches.Länge;
changetouchesH1.innerHTML = "changetouches" + e.changedTouches.length;
}
// Verwenden der Touch-Bibliothek (mobil)
$('#box').tap(Funktion() {
Konsole.log('====tippen====')
})
$('#box').longTap(Funktion() {
console.log('====langes Tippen====')
})
$('#box').doubleTap(Funktion() {
console.log('====doppelt tippen====')
})
$('#box').swiperLeft(Funktion() {
console.log('====linkes Tippen====')
})
// Verwenden der Zepto-Bibliothek (mobil)
$("#box").tap(Funktion() {
Konsole.log('======tap==========');
})
$("#box").singleTap(Funktion() {
Konsole.log('======singleTap==========');
})
$("#box").doubleTap(Funktion() {
Konsole.log('======doubleTap==========');
})
$("#box").longTap(Funktion() {
Konsole.log('======longTap==========');
})
$("#box").wischen(Funktion() {
Konsole.log('======swipeTap==========');
})
// Benutzerdefinierte Touch-Ereignisbibliothek // Kapselt eine benutzerdefinierte Touch-Ereignisbibliothek ein // Hinweis: Das davor stehende Semikolon soll verhindern, dass auf andere Bibliotheken ohne ein Semikolon am Ende verwiesen wird, was zu Problemen führen kann, wenn der Code später komprimiert wird.
(Funktion(Fenster, undefiniert) {
var Abfrage = Funktion(Selektor) {
gibt query.fn.init(Selektor) zurück;
};
Abfrage.fn = Abfrage.Prototyp = {
//Die Initialisierungsmethode simuliert die Methode zum Abrufen von Elementen, aber was hier abgerufen wird, ist nicht das tatsächliche Element. Das tatsächliche Element wird in der Elementeigenschaft des gesamten Objekts gespeichert init: function(selector) {
wenn (Typ des Selektors == 'Zeichenfolge') {
dieses.Element = document.querySelector(Selektor);
gib dies zurück;
}
},
//Klick, Handler ist die Rückruffunktion, die die Antwortfunktion nach dem Klicken ist. Tippen Sie auf: function(handler) {
this.element.addEventListener('touchstart', touchFn);
this.element.addEventListener('touchend', touchFn);
// Zur Unterscheidung von Zeitvariablen und langem Drücken wird eine Zeitdifferenzbeurteilung vorgenommen. var startTime, endTime;
Funktion touchFn(e) {
Schalter (e.Typ) {
Fall 'Touchstart':
//Zeichnen Sie eine Zeit auf, wenn Sie auf startTime = new Date().getTime() gedrückt haben.
brechen;
Fall 'berührt':
//Das Abgangsereignis zeichnet eine Zeit auf endTime = new Date().getTime();
if (Endzeit - Startzeit < 500) {
//Wenn die Geste geht, Callback-Handler();
}
brechen;
}
}
},
//Lange drücken longTap: function(handler) {
this.element.addEventListener('touchstart', touchFn);
this.element.addEventListener('touchend', touchFn);
//Dieses mobile Ereignis dient der Lösung von Konflikten mit anderen Ereignissen this.element.addEventListener('touchmove', touchFn);
var Zeit-ID;
Funktion touchFn(e) {
Schalter (e.Typ) {
Fall 'Touchstart':
//Wenn der Druck 500 ms erreicht, betrachten wir es als langen Druck clearTimeout(timeId);
ZeitId = setzeTimeout(Funktion() {
handler();
}, 500);
brechen;
Fall 'berührt':
// Lösche den Timer beim Verlassen von clearTimeout(timeId);
brechen;
Fall 'Touchmove':
//Nach dem Verschieben den Timer für langes Drücken löschen clearTimeout(timeId);
brechen;
}
}
},
//Doppelklick doubleTap: function(handler) {
this.element.addEventListener('touchstart', touchFn);
this.element.addEventListener('touchend', touchFn);
// Notieren Sie die Anzahl der Male, die var tapCount = 0 ist.
Zeit-ID;
Funktion touchFn(e) {
Schalter (e.Typ) {
Fall 'Touchstart':
//Zeichnen Sie tapCount++ einmal auf, wenn gedrückt wird;
//Wenn Sie gerade hereinkommen, löschen Sie den Timer clearTimeout(timeId);
ZeitId = setzeTimeout(Funktion() {
//Wenn 500 ms erreicht werden, denken wir, dass es kein Doppelklick ist und müssen tapCount löschen tapCount = 0;
}, 500);
brechen;
Fall 'berührt':
// Lösche den Timer beim Verlassen if (tapCount == 2) {
//Wenn zweimal gedrückt wird, wird es als Doppelklick betrachtet handler();
//Nach dem Auslösen eines Doppelklicks wird die Anzahl der Klicks gelöscht tapCount = 0;
//Timer löschen clearTimeout(timeId);
}
brechen;
}
}
},
//SwiperLeft: Funktion (Handler) {
this.element.addEventListener('touchstart', touchFn);
this.element.addEventListener('touchend', touchFn);
//Koordinaten des Gestenauslösers var startX, startY, endX, endY;
Funktion touchFn(e) {
Schalter (e.Typ) {
Fall 'Touchstart':
//Startkoordinaten beim Drücken von startX = e.targetTouches[0].pageX; aufzeichnen.
startY = e.targetTouches[0].pageY;
brechen;
Fall 'berührt':
//Endkoordinaten beim Verlassen aufzeichnen endX = e.changedTouches[0].pageX;
endY = e.changedTouches[0].pageY;
//Beurteilen, ob es sich um eine linke oder rechte Folie handelt&& //Beurteilen, ob es sich um eine linke oder rechte Folie handeltif (Math.abs(endX - startX) >= Math.abs(endY - startY) && (startX - endX) >= 25) {
handler();
}
brechen;
}
}
},
}
query.fn.init.prototype = query.fn;
Fenster.$ = Fenster.Abfrage = Abfrage;
}(Fenster, undefiniert))
</Skript>
</html>Damit ist dieser Artikel über das flexible CSS-Layout FLEX, Medienabfragen und die Implementierung mobiler Klickereignisse abgeschlossen. Weitere relevante Inhalte zum flexiblen CSS-Layout finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Lassen Sie den IE CSS3 Media Query unterstützen, um responsives Webdesign zu erreichen
>>: So verkleinern Sie das Stammverzeichnis des XFS-Partitionsformats in Linux
Artikel empfehlen
Lösung zum Finden aller untergeordneten Zeilen für eine bestimmte übergeordnete Zeile in MySQL
Vorwort Hinweis: Die Testdatenbankversion ist MyS...
Verwendung von Vue-Filtern und Probleme bei der Zeitstempelkonvertierung
Inhaltsverzeichnis 1. Das Konzept schnell erkenne...
Nginx-Konfiguration: Trennung von PC-Site und mobiler Site zur Realisierung der Umleitung
Verwenden Sie nginx, um die Trennung von PC-Site ...
Detailliertes Tutorial zur Installation von Tomcat8.5 in einer Centos8.2-Cloud-Serverumgebung
Installieren Sie vor der Installation von Tomcat ...
JavaScript zur Implementierung der Webversion des Schlangenspiels
In diesem Artikel wird der spezifische Code für J...
Beherrschen Sie die häufig verwendeten HTML-Tags zum Zitieren von Inhalten auf Webseiten.
Verwenden Sie „blockquote“ für lange Zitate, „q“ ...
Erstellen Sie eine Bildschirmaufzeichnungsfunktion mit JS
OBS studio ist cool, aber JavaScript ist cooler. ...
Detailliertes Tutorial zur Installation von mysql5.7.18 auf centos7.3
1 Überprüfen Sie die Linux-Distributionsversion [...
Ideen zum Erstellen von Welleneffekten mit CSS
Zuvor habe ich mehrere Möglichkeiten vorgestellt,...
Super einfache QPS-Statistikmethode (empfohlen)
Statistik der QPS-Werte der letzten N Sekunden (i...
Detaillierte Schritte zum Bereitstellen eines Tomcat-Servers basierend auf IDEA
Inhaltsverzeichnis Einführung Schritt 1 Schritt 2...
Verständnis des synchronen oder asynchronen Problems von setState in React
Inhaltsverzeichnis 1. Ist setState synchron? asyn...
Sieben Prinzipien eines guten Designers (1): Schriftdesign
Nun, vielleicht sind Sie ein Design-Guru, oder vie...
JavaScript klickt auf die Schaltfläche, um einen 4-stelligen zufälligen Bestätigungscode zu generieren
In diesem Artikelbeispiel wird der spezifische Co...
Detailliertes Tutorial zum Bereitstellen eines Django-Projekts unter CentOS
Grundlegende Umgebung Pagoden-Montageservice [Pyt...