Griglia del primo contenuto per cellulare con HTML puro e CSS

Design sensibile al dispositivo, reattivo o mobile-First, che è adattato al Dimensione dello schermo in cui viene visualizzato un Web, può essere costruito con HTML puro e CSS. Con alcuni stili e struttura nel contenuto, possiamo gestire la disposizione di questi contenuti sullo schermo.

Se si guarda come viene visualizzato il contenuto di griglia di uno dei principali file mobili, che Si chiama Bootstrap, salta alla vista che si basa su due idee. Il primo è visualizzare le scatole in alcune righe con molte colonne quando lo schermo è abbastanza largo. E mostrare le scatole in molte righe con poche colonne quando ci sono pochi pixel della larghezza dello schermo.

Grand, il codice sorgente

Questo è un design che pinta 2 righe e 3 colonne Quando ci sono più di 1024 pixel. E quando c’è meno dipingere 6 righe con 1 colonna:

su una schermata ampia verrà visualizzata come immagine seguente:

e su uno schermo ristretto verrà visualizzato come seguente immagine :

Un tasto CSS chiave è:

display: flex;

Un altro tasto CSS linea è:

@media screen and (max-width: 1024px) {

Gioca con queste cose, è La storia per rendere disegni Mobile-First, Design reattivi 🤪

Leave a Comment

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *