Een andere factor die ertoe leidt dat we ons richten op mobile-first responsive design, is dat de meeste mensen toegang hebben tot internet via hun mobiele apparaten: dat is 60%. Terwijl slechts 20% van de mensen internet op desktops gebruikt.
In dit artikel worden de instructies beschreven voor het maken van een mobiel-eerst responsief ontwerp.
Hoe configureer je een mobiel-eerst responsief ontwerp?
Het responsieve ontwerp, of het nu mobile-first responsive is of voor grotere schermen, kan worden gemaakt door de onderstaande methoden te volgen:
- Creëer een mobiel-eerst responsief ontwerp.
- Gebruik/gebruik de mediaquery om een responsief ontwerp voor grotere schermen te ontwikkelen/creëren.
Methode 1: Creëer een mobile-first responsief ontwerp
Begin eerst met het creëren van de mobile-first ontwerpaanpak. Volg daartoe de onderstaande stapsgewijze instructies.
Stap 1: Maak een HTML-structuur
Maak eerst een HTML-structuur en voeg een “ Bootstrap ' in de
< ul >
< Dat >< A href = '#' > Thuis < / A >< / Dat >
< Dat >< A href = '#' > Over ons < / A >< / Dat >
< Dat >< A href = '#' > Onze diensten < / A >< / Dat >
< Dat >< A href = '#' > Neem contact met ons op < / A >< / Dat >
< / ul >
< / nee>
< / kop>
< h1 > Welkom bij Linux Tip < / h1 >
< P > Een tutorials-website. < / P >
< / sectie>
< / belangrijkste>
< P > Linux Tip Auteursrecht < / P >
< / voettekst>
< / lichaam >
Stap 2: CSS toepassen
Stel in het hoofdgedeelte de “ lettertype-familie ' naar ' schreefloos ”. Stel ook de opvulling, marge en achtergrondkleur in. Pas daarna CSS toe op de koptekst, voettekst en navigatie:
lichaam {lettertype-familie : schreefloos ;
marge : 0 ;
opvulling : 0 ;
Achtergrond kleur : #808080 ;
}
koptekst {
Achtergrond kleur : paars ;
kleur : wit ;
opvulling : 8px ;
}
nav ul {
lijst-stijl-type : geen ;
opvulling : 0 ;
marge : 0 ;
}
hun schip {
marge : 4px 0 ;
}
nav ul li a {
kleur : wit ;
tekstdecoratie : geen ;
}
voornaamst {
opvulling : 18px ;
}
voettekst {
Achtergrond kleur : roze ;
kleur : wit ;
tekst uitlijnen : centrum ;
opvulling : 8px ;
}
Zoals je kunt zien, heeft de onderstaande output bevestigd dat het ontwerp mobile-first responsive is:
Methode 2: Gebruik mediaquery's om responsief ontwerp te maken voor grotere schermen
Bovenstaand ontwerp is ook te maken voor grotere schermen zoals tablets en desktops. Voor dat doel moeten gebruikers mediaquery's opnemen in de CSS. De breedte voor tablets is “ 786px ' en voor desktops is ' 1024px ”.
Om de mediaquery's toe te passen, voegt u eerst de ' @media ”-tag in het CSS-bestand. Geef daarna de eigenschap “min-width” op als de “ 768px ”. Dit betekent dat wanneer aan de minimale schermgrootte “768px” of hoger wordt voldaan, de volgende CSS van toepassing is:
@media ( min-breedte : 768px ) {lichaam {
lettertypegrootte : 14px ;
}
koptekst {
opvulling : 18px ;
}
nav ul {
weergave : buigen ;
}
hun schip {
marge : 0 8px ;
}
voornaamst {
weergave : buigen ;
rechtvaardigen-inhoud : ruimte tussen ;
uitlijnen-items : centrum ;
}
voettekst {
opvulling : 18px ;
}
}
Uit de onderstaande uitvoer blijkt dat het ontwerp ook op grotere schermen reageert:
Conclusie
Om een mobile-first responsief ontwerp op te zetten, maakt u eerst een HTML-structuur en voegt u de viewport toe. Koppel daarna het CSS-bestand in de head-tag. Pas vervolgens CSS toe op basis van een mobiel-eerst responsief ontwerp. Bovendien kunnen gebruikers de CSS-mediaquery toevoegen om deze op het mobiele apparaat aan te passen. Dit artikel heeft een gedetailleerde procedure gedemonstreerd voor het opzetten van een mobile-first responsive ontwerp.