Un altro fattore che porta a concentrarsi sul responsive design mobile-first è che la maggior parte delle persone accede a Internet tramite i propri dispositivi mobili, ovvero il 60%. Mentre solo il 20% delle persone utilizza Internet sui desktop.
Questo articolo tratterà le istruzioni per creare il design reattivo mobile-first.
Come impostare il responsive design mobile-first?
Il design reattivo, sia esso mobile-first responsive o per schermi più grandi, può essere creato seguendo i metodi indicati di seguito:
- Crea un design responsivo mobile-first.
- Utilizzare/utilizzare la media query per sviluppare/creare un design reattivo per schermi più grandi.
Metodo 1: crea un design responsive mobile-first
Innanzitutto, inizia con la creazione di un approccio progettuale mobile-first. A tale scopo, seguire le istruzioni passo passo fornite di seguito.
Passaggio 1: crea una struttura HTML
Innanzitutto, crea una struttura HTML e aggiungi un ' Bootstrap ' nel
< ul >
< Quello >< UN href = '#' > Casa < / UN >< / Quello >
< Quello >< UN href = '#' > Chi siamo < / UN >< / Quello >
< Quello >< UN href = '#' > I nostri servizi < / UN >< / Quello >
< Quello >< UN href = '#' > Contattaci < / UN >< / Quello >
< / ul >
< / no>
< / intestazione>
< h1 > Benvenuti in Linux Suggerimento < / h1 >
< P > Un sito web di tutorial. < / P >
< / sezione>
< / principale>
< P > Suggerimento per Linux Copyright < / P >
< / piè di pagina>
< / corpo >
Passaggio 2: applica i CSS
Nella sezione del corpo, imposta ' famiglia di font ' A ' senza grazie ”. Imposta anche il riempimento, il margine e il colore di sfondo. Successivamente applica i CSS all'intestazione, al piè di pagina e alla navigazione:
corpo {famiglia di font : senza grazie ;
margine : 0 ;
imbottitura : 0 ;
colore di sfondo : #808080 ;
}
intestazione {
colore di sfondo : viola ;
colore : bianco ;
imbottitura : 8px ;
}
navigazione ul {
tipo di stile elenco : nessuno ;
imbottitura : 0 ;
margine : 0 ;
}
la loro nave {
margine : 4px 0 ;
}
nav ul li a {
colore : bianco ;
decorazione del testo : nessuno ;
}
principale {
imbottitura : 18px ;
}
piè di pagina {
colore di sfondo : rosa ;
colore : bianco ;
allineamento del testo : centro ;
imbottitura : 8px ;
}
Come si può osservare, l'output seguente ha confermato che il design è mobile-first responsive:
Metodo 2: utilizzare le query multimediali per creare un design reattivo per schermi più grandi
Il design di cui sopra può essere creato anche per schermi più grandi come tablet e desktop. A tale scopo, gli utenti devono includere la query multimediale nel CSS. La larghezza per i tablet è “ 786px ' e per i desktop è ' 1024px ”.
Per applicare le query multimediali, includere innanzitutto ' @media ' nel file CSS. Successivamente, specifica la proprietà 'min-width' come ' 768px ”. Ciò significa che ogni volta che viene soddisfatta la dimensione minima dello schermo '768px' o superiore, verrà applicato il seguente CSS:
@media ( larghezza minima : 768px ) {corpo {
dimensione del font : 14px ;
}
intestazione {
imbottitura : 18px ;
}
navigazione ul {
Schermo : flettere ;
}
la loro nave {
margine : 0 8px ;
}
principale {
Schermo : flettere ;
giustificare il contenuto : spazio in mezzo ;
allineare-elementi : centro ;
}
piè di pagina {
imbottitura : 18px ;
}
}
L'output seguente ha dimostrato che il design è reattivo anche su schermi più grandi:
Conclusione
Per impostare un design responsivo mobile-first, crea innanzitutto una struttura HTML e aggiungi il viewport. Successivamente collega il file CSS nel tag head. Quindi, applica i CSS basati sul design responsivo mobile-first. Inoltre, gli utenti possono aggiungere la query multimediale CSS per adattarla sul dispositivo mobile. Questo articolo ha dimostrato una procedura dettagliata per impostare un design reattivo mobile-first.