Ein weiterer Faktor, der dazu führt, dass man sich auf mobiles responsives Design konzentriert, ist, dass die meisten Menschen über ihre Mobilgeräte auf das Internet zugreifen, nämlich 60 %. Während nur 20 % der Menschen das Internet auf Desktops nutzen.
In diesem Artikel werden die Anweisungen zum Erstellen des Mobile-First-Responsive-Designs behandelt.
Wie richtet man Mobile-First-Responsive-Design ein?
Das responsive Design, egal ob es sich um ein Mobile-First-Responsive-Design handelt oder für größere Bildschirme, kann mit den folgenden Methoden erstellt werden:
- Erstellen Sie ein responsives Design für Mobilgeräte.
- Verwenden/nutzen Sie die Medienabfrage, um ein responsives Design für größere Bildschirme zu entwickeln/erstellen.
Methode 1: Erstellen Sie ein Mobile-First-Responsive-Design
Beginnen Sie zunächst mit der Entwicklung des Mobile-First-Designansatzes. Gehen Sie zu diesem Zweck die unten aufgeführten schrittweisen Anweisungen durch.
Schritt 1: Erstellen Sie eine HTML-Struktur
Erstellen Sie zunächst eine HTML-Struktur und fügen Sie ein „ Bootstrap ' im
< ul >
< Das >< A href = „#“ > Heim < / A >< / Das >
< Das >< A href = „#“ > Über uns < / A >< / Das >
< Das >< A href = „#“ > Unsere Dienstleistungen < / A >< / Das >
< Das >< A href = „#“ > Kontaktiere uns < / A >< / Das >
< / ul >
< / nein>
< / Kopfzeile>
< h1 > Willkommen bei Linux Hint < / h1 >
< P > Eine Tutorial-Website. < / P >
< / Abschnitt>
< / Hauptseite>
< P > Linux-Hinweis Copyright < / P >
< / Fußzeile>
< / Körper >
Schritt 2: CSS anwenden
Stellen Sie im Abschnitt „Körper“ die Option „ Schriftfamilie ' Zu ' serifenlos “. Legen Sie außerdem den Abstand, den Rand und die Hintergrundfarbe fest. Wenden Sie anschließend CSS auf die Kopf-, Fuß- und Navigationszeile an:
Körper {Schriftfamilie : serifenlos ;
Marge : 0 ;
Polsterung : 0 ;
Hintergrundfarbe : #808080 ;
}
Header {
Hintergrundfarbe : lila ;
Farbe : Weiß ;
Polsterung : 8px ;
}
nav ul {
Listenstiltyp : keiner ;
Polsterung : 0 ;
Marge : 0 ;
}
ihr Schiff {
Marge : 4px 0 ;
}
nav ul li a {
Farbe : Weiß ;
Textdekoration : keiner ;
}
hauptsächlich {
Polsterung : 18px ;
}
Fusszeile {
Hintergrundfarbe : Rosa ;
Farbe : Weiß ;
Textausrichtung : Center ;
Polsterung : 8px ;
}
Wie zu sehen ist, hat die folgende Ausgabe bestätigt, dass das Design auf Mobilgeräte reagiert:
Methode 2: Verwenden Sie Medienabfragen, um ein responsives Design für größere Bildschirme zu erstellen
Das obige Design kann auch für größere Bildschirme wie Tablets und Desktops erstellt werden. Zu diesem Zweck müssen Benutzer eine Medienabfrage in das CSS einbinden. Die Breite für Tablets beträgt „ 786px ” und für Desktops ist „ 1024px “.
Um die Medienabfragen anzuwenden, fügen Sie zunächst Folgendes ein: @Medien ”-Tag in der CSS-Datei. Geben Sie anschließend die Eigenschaft „min-width“ als „ 768px “. Das bedeutet, dass immer dann, wenn die Mindestbildschirmgröße „768px“ oder mehr erreicht wird, das folgende CSS gilt:
@Medien ( Mindestbreite : 768px ) {Körper {
Schriftgröße : 14px ;
}
Header {
Polsterung : 18px ;
}
nav ul {
Anzeige : biegen ;
}
ihr Schiff {
Marge : 0 8px ;
}
hauptsächlich {
Anzeige : biegen ;
Rechtfertigungsinhalt : Raum dazwischen ;
align-items : Center ;
}
Fusszeile {
Polsterung : 18px ;
}
}
Die folgende Ausgabe zeigt, dass das Design auch auf größeren Bildschirmen reagiert:
Abschluss
Um ein responsives Design für Mobilgeräte einzurichten, erstellen Sie zunächst eine HTML-Struktur und fügen Sie den Ansichtsbereich hinzu. Anschließend verlinken Sie die CSS-Datei im Head-Tag. Wenden Sie dann CSS basierend auf dem Mobile-First-Responsive-Design an. Darüber hinaus können Benutzer die CSS-Medienabfrage hinzufügen, um sie auf dem mobilen Gerät anzupassen. In diesem Artikel wurde ein detailliertes Verfahren zum Einrichten eines responsiven Designs für Mobilgeräte demonstriert.