Codierungstipps für responsives WEB-Design Teil 1

Codierung für responsives Webdesign mit Medienabfragen

Es gibt andere Methoden als Vorbereitung vor dem Codieren für responsives Webdesign mit Medienabfragen, aber angesichts der einfachen Migration denke ich, dass flüssiges Layout einfacher zu verwenden ist.

·Punkt 1)

Was die Breite betrifft, so wird sie nicht in px festgelegt, sondern grundsätzlich in Prozent.

・Punkt 2)

Es ist praktisch, den inneren Elementen Ränder und Polster hinzuzufügen.

・Punkt 3)

Gute Verwendung von Schwimmern.

・Punkt 1) Die Breite ist nicht in px festgelegt, sondern in Prozent.

Um das Layout je nach Gerät zu optimieren, wird bei einer Änderung der Fensterbreite auch die Breite des Inhalts prozentual geändert. Mit anderen Worten: Es werden traditionelle Liquid-Layout-Techniken verwendet.

Geben Sie im folgenden Beispiel 80 % für #main und 20 % für #side an.

* Andere Elemente, die keine Breite angeben, haben grundsätzlich eine Breite von 100 %.

sample01 Flüssigkeitslayout 

Geben Sie eine feste Breite (beliebig) für den Umriss (#wrapper) des obigen Beispiels an.
Beispielsweise ändert sich eine Breite von 920 Pixel vom flüssigen zum festen Layout.

sample02 festes Layout 

・Punkt 2) Es ist bequemer, den inneren Elementen Ränder und Polster hinzuzufügen.

Wenn bei Elementen, deren Breite als Prozentsatz angegeben wird, die Ränder und der Abstand in Pixeln festgelegt werden, ist die Berechnung nicht nur umständlich, sondern führt auch dazu, dass das Layout zusammenbricht.
Es gibt auch eine Möglichkeit, Ränder und Pixel konsistent in Prozentsätzen anzugeben. Da diese jedoch ebenfalls variabel sind, führt dies häufig zu einem unbeabsichtigten Layout.

Daher gibt #main von sample01 die Breite als Prozentsatz an, umschließt das innere Element mit .main_inner und gibt ihm eine feste Auffüllbreite (10 Pixel im Beispiel). Auch wenn die Fensterbreite geändert wird, beträgt die Auffüllung 10 Pixel. Bleiben .

Auch wenn der Abstand zwischen Elementen, deren Breite als Prozentsatz angegeben ist, durch Hinzufügen eines Abstands zu den Elementen, die jedes Element umschließen, geändert wird, bleibt der Abstand zwischen Elementen konstant.

sample03 Flüssigkeitslayout B 

・Punkt 3) Nutzen Sie Schwimmkörper sinnvoll.

Für das li-Element des runden Rahmenteils (.something) im folgenden Beispiel schweben Sie es und geben Sie eine feste Breite an, sodass das Element umwickelt wird, wenn es variabel ist (horizontale Breite schrumpft).

sample01 Flüssigkeitslayout 

Medienabfragen anwenden

Versuchen Sie, Medienabfragen basierend auf den oben genannten Punkten anzuwenden

Legen Sie zunächst einen Haltepunkt fest

Ein Haltepunkt ist eine Gerätebreitengrenze (Fensterbreite), die den anzuwendenden Stil ändert.
Die folgenden Einstellungen werden üblicherweise festgelegt:

Unter Verwendung der oben genannten Haltepunkte als Referenz habe ich im Beispiel tatsächlich Medienabfragen verwendet.

sample04 reagiert 

Im Beispiel wird das CSS für jeden Haltepunkt wie folgt beschrieben.

 
@media screen and (max-width: 1024px) { /*各ブレークポイントごとのcssを記述*/ 
/* Wechseln Sie zunächst vom festen Layout zum flüssigen Layout. */
 }

 @media screen und (max-width: 768px) {
 /* CSS für jeden Haltepunkt beschreiben */
 /* Durch Entschweben der #main- und #side-Spalten und deren Breite auf 100 % */
 /* Wechsel von links und rechts 2 Spalten zu vertikalen 2 Zeilen. */
 }

 @media screen und (max-width: 480px) {
 /* CSS für jeden Haltepunkt beschreiben */
 /* Überschrift und Schulter verdoppeln. */
 /* Globales Menü in die Kopfzeile verschieben. */
 /* Heben Sie den Artikel (etwas) im Hauptinhalt auf und richten Sie ihn vertikal aus. */
 }

 @media screen und (max-width: 320px) {
 /* CSS für jeden Haltepunkt beschreiben */
 /* Komprimieren Sie das globale Menü. */
 }

Wenn bei der obigen Beschreibungsmethode die Fenstergröße kleiner als die Breite des Haltepunkts ist, wird der Stil in der Haltepunktbeschreibung angewendet, andere Stile werden jedoch außerhalb von Medienabfragen als größer als der aktuelle Haltepunkt angegeben. Beachten Sie, dass der Stil fertig war, geht noch.

Geben Sie abschließend das Ansichtsfenster an.

 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, user-scalable = no">

Dieses Mal habe ich kurz die Methode „Grundlegende Antwort vom flüssigen Layout zur Reaktion mithilfe von Medienabfragen“ vorgestellt, aber das ist nur ein Beispiel, und ich denke, es gibt viele andere Methoden.
Tatsächlich denke ich, dass es viele Fälle gibt, in denen eine detaillierte Antwort auf jeden einzelnen Fall erforderlich ist.