✅ Comment créer une mise en page réactive

Table des matières

Exigences
Les propriétés largeur minimale et largeur maximale
En utilisant le Remplissage relatif

UNE mise en page réactive est devenu la norme dans le web design, ce type de mise en page signifie que si la fenêtre qui le contient change brusquement de taille, c'est-à-dire de très grande à très petite et vice versa, nos éléments doivent être en capacité de se réorganiser pour maintenir un expérience utilisateur décente et fonctionnelle.

Cela a toujours été disponible avec les règles de CSSCependant, lors de la dernière mise en œuvre du même, de meilleures mesures ont été prises, en partie en raison de l'existence déjà du monde mobile moderne, qui est l'un des grands consommateurs de design. sensible.

Bien qu'il existe plusieurs cadres tels que Amorcer ou alors Fondation qui nous donnent un layout responsive par défaut, on ne peut pas toujours dépendre d'eux, c'est pourquoi il est très utile de savoir comment on peut construire un layout de ces caractéristiques par nos propres moyens.

Exigences

1- Pour terminer ce tutoriel, nous aurons besoin d'avoir des connaissances de base sur HTML Oui CSS, car ils sont essentiels pour comprendre les exemples réalisés dans le didacticiel.

2- Sur le plan technique, nous avons besoin d'au moins un navigateur moderne comme Google Chrome, un éditeur de texte pour écrire notre code, nous pouvons utiliser Texte sublime o NotePad ++ ou encore le bloc-notes Windows ou Gédit sur Linux si nous nous sentons aventureux.

3- Enfin, nous avons besoin d'une connexion Internet pour télécharger une image ou deux si nous voulons la placer dans notre code comme nous le verrons dans l'un des exemples présentés.

Les propriétés largeur minimale et largeur maximale

C'est peut-être le premier aspect que nous rencontrons lorsque nous travaillons avec des environnements sensible, car nous nous concentrons souvent sur le moment où la page devient plus petite, mais qu'en est-il des nouveaux écrans de 4K? C'est pourquoi nous ne devons pas négliger la résolution maximale sous laquelle notre site Web semble décent.

largeur minimale et largeur maximaleLes propriétés ou attributs largeur minimale Oui largeur maximale Les CSS nous aident à lutter contre ce problème, car ils nous permettent d'établir les marges maximales sous lesquelles nous voulons que notre conception soit sensible, car sinon, les extrêmes dans les tailles peuvent nous jouer un tour, surtout dans ces moments où les résolutions continuent d'augmenter, mais ne deviennent pas encore massives.

Dans l'exemple suivant, nous montrerons comment nous pouvons réguler notre disposition grâce aux propriétés mentionnées, pour cela nous allons créer un document HTML avec le contenu suivant :

Exemple de mise en page responsive 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales. Phasellus varius ipsum non ligula aliquet ultricies in quis pain. Véhicule Aliquam ac nisl.

Ce que nous avons fait, c'est créer trois éléments div qui fonctionnent comme une sorte de colonnes, nous disons donc à son élément conteneur dans ce cas article que sa largeur maximale sera 1200 pixelsDonc, quelle que soit la taille de l'écran, le design ne grandira jamais plus à partir de là, alors nous créons trois classes, une pour chaque div et une nous attribuons une largeur minimale de cette manière, peu importe à quel point l'écran est réduit, il va toujours. pour maintenir ce minimum de proportions, c'est excellent pour les images comme nous le verrons dans la capture d'écran de l'exemple, et enfin pour la classe flotter nous lui attribuons également une largeur minimale. Voyons à quoi ressemble notre exemple dans le navigateur lorsque nous avons une grande résolution :

AGRANDIR

Voyons maintenant comment cela évolue lorsque nous réduisons un peu la fenêtre du navigateur :

AGRANDIR

Enfin, voyons le résultat lorsque l'on fait en sorte que la fenêtre ait une taille similaire à celle d'un mobile :

Nous avons pu voir comment les proportions établies comme minimum et maximum ont été maintenues, mais le plus important est que notre conception a été adaptée aux différentes résolutions avec lesquelles nous l'avons visualisée, et de cette manière nous avons pu nous assurer que l'utilisateur ne perde pas convivialité dans leur expérience avec notre site.

Bien sûr, c'est loin d'être quelque chose à montrer en production, mais cela nous donne une idée de l'endroit où nous devrions concentrer certains des efforts lorsque nous travaillons sur de vrais designs pour nos applications et nos pages, la chose intéressante est que les colonnes ont été ajustées afin que nous puissions voir comment nous sommes passés d'une mise en page à 3 colonnes à une mise en page à une seule colonne.

En utilisant le Remplissage relatif

Le rembourrage C'est une mesure qui nous permet de maintenir un espace du contenu contre les bords du conteneur afin d'établir une limite de jusqu'où il ira, il ne faut pas le confondre avec la marge car c'est un autre concept.

Le fait est que le rembourrage n'est presque jamais pris en compte lors d'une disposition être sensible résultant en des textes et du contenu qui restent par la suite non esthétiques lors de la modification de la résolution avec laquelle la conception est visualisée.

Dans le code suivant, nous allons placer un rembourrage qui fonctionne relativement, c'est-à-dire que la taille de la fenêtre est ajustée, notre rembourrage Il changera pour maintenir les proportions et ainsi faire en sorte que le contenu reste toujours tel que nous l'avons organisé malgré le fait qu'il dispose de moins d'espace en raison du changement de résolution. Voyons notre exemple de code :

Remplissage relatifMaintenir les proportions avec un rembourrage relatif

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales.

Comme nous le voyons, nous définissons les propriétés rembourrage de chaque classe avec des valeurs en pourcentage au lieu de valeurs fixes avec des mesures en pixels, de cette façon l'interpréteur de style du navigateur donnera une mesure qui va en fonction de la valeur que nous avons placée, à la fin quand nous voyons notre exemple dans le navigateur, nous obtenons ceci :

AGRANDIR

Maintenant, si nous réduisons la taille de la fenêtre, nous verrons comment un ajustement est effectué mais en maintenant une distance proportionnelle du texte aux bords :

Nous remarquons ensuite comment notre conception est maintenue et empêche la déformation en réduisant la résolution de la personne qui la contient, maintenant ainsi une expérience cohérente pour notre utilisateur.

Bien qu'il existe des concepts plus avancés que nous aborderons dans d'autres tutoriels, avec ces quelques astuces ou conseils, nous pouvons réussir à donner une nouvelle vie à nos anciens sites, et bien plus maintenant que les moteurs de recherche comme Google Ils nous demandent une version mobile pour pouvoir nous donner des préférences dans les résultats. La chose la plus importante pour obtenir d'excellents résultats est d'expérimenter et de continuer à pratiquer beaucoup afin que ces solutions sortent naturellement de notre esprit et que nous n'ayons pas à recourir à des guides à tout moment.

Avec cela, nous terminons ce tutoriel, comme nous le voyons, nous n'avons besoin d'aucun cadre pour obtenir des résultats sensible, et nous n'avons pas non plus besoin de quitter la combinaison HTML + CSSLa seule chose est que si nous devons construire nos propres outils, cependant la satisfaction d'améliorer notre conception est une belle récompense.