Grille de contenu mobile-First avec pure HTML et CSS

conception sensible au dispositif, réactif ou mobile – premier, qui est adapté à la Taille de l’écran où une bande est affichée, elle peut être construite avec Pure HTML et CSS. Avec quelques styles et une structure en contenu, nous pouvons gérer la disposition de ces contenus sur l’écran.

Si vous examinez la manière dont le contenu de la grille de l’un des principaux framed-Premier cadre mobile est affiché, C’est ce qu’on appelle Bootstrap, saute à la vue basée sur deux idées. Le premier consiste à visualiser les cases de quelques lignes avec de nombreuses colonnes lorsque l’écran est suffisamment large. Et montrez les cases dans de nombreuses lignes avec peu de colonnes quand il y a peu de pixels de la largeur de l’écran.

Grand, le code source

Ceci est un design qui pinte 2 rangées et 3 colonnes quand il y a plus de 1024 pixels. Et quand il y a moins, il y a moins de peindre 6 rangées avec 1 colonne:

sur un large écran sera affiché comme l’image suivante:

« 4f93e6015c »>
<158a1957f9 ">

et sur un écran étroit sera affiché comme l’image suivante :

Une clé CSS est la suivante:

display: flex;

Une autre ligne de la ligne CSS est la suivante:

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

jouer avec ces choses, est L’histoire pour créer des dessins de conceptions mobiles, des conceptions réactives 🤪

Leave a Comment

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *