Comment créer un site Web mobile et réactif à partir de zéro en HTML et CSS.

Pour les développeurs

Si vous envisagez de créer un site Web dans quelques jours, votre objectif numéro un devrait être de vous assurer qu'il est réactif et adaptable à toutes les tailles d'écran. En effet, Google a annoncé que tous les sites Web réactifs seraient mieux classés en raison de meilleurs temps de chargement, d'une meilleure convivialité et seraient préférés dans les recherches mobiles. Ainsi, un site Web qui se charge rapidement et qui s’affiche bien sur tous les écrans mobiles aura un avantage sur un site Web qui n’est pas construit de manière réactive. Et si nous voulons parler de réactivité mobile, nous devons également parler de programmation mobile first, dans laquelle vous construisez votre code HTML et CSS en pensant d'abord aux écrans mobiles. Le design réactif et la programmation mobile first vont de pair. Ainsi, pour tirer le meilleur parti de votre site Web, il doit être réalisé d'abord sur mobile et entièrement réactif.

Cet article s'adresse aux développeurs qui cherchent à comprendre comment diable vous créez des sites Web réactifs en premier lieu et contient toutes les réponses que j'aurais aimé connaître lorsque j'ai débuté. Alors commençons !

Commencer par le mobile

Avant même de penser à créer un site Web réactif, vous devez comprendre comment créer un site Web mobile. C'est une compétence clé dans le monde du développement Web d'aujourd'hui et, à mon avis, LA meilleure façon de créer un site Web et cela le rend en fait plus facile.

L’idée est de structurer votre code HTML et CSS en pensant d’abord au téléphone mobile. Une fois votre code HTML terminé, ouvrez-le dans le navigateur, inspectez l'élément, puis choisissez l'option d'écran iPhone 5SE. Il s'agit de la plus petite taille d'écran mobile que vous rencontrerez avec une largeur de 320 pixels. Ce sera votre canevas au lieu de la vue complète du bureau. Ce sera la dernière ! Ici, nous commençons par le mobile, et c'est là que tout commence. J'aime zoomer à 75% pour que ce ne soit pas si petit. Il s'agit de la taille de l'écran dans laquelle vous écrirez votre CSS. Aucune requête multimédia n'est requise. Écrivez simplement le code qui fait que tout rentre dans cette taille d'écran. C'est le début de la programmation mobile first !

Structurer d'abord votre CSS pour mobile

Dans mobile, nous commençons d'abord le haut de votre fichier CSS avec le code mobile, puis ajoutons des requêtes multimédias pour des tailles d'écran plus grandes au fur et à mesure que nous descendons la page. Les points d'arrêt les plus couramment utilisés sont :

• 400px - Grands téléphones
• 568px - Paysage Mobile
• 768px - Tablette
• 1024px - Petit ordinateur de bureau (ordinateurs portables)
• 1300px - Bureau normal
• Et tout autre point d'arrêt dont vous pourriez avoir besoin pour s'adapter au reste de votre conception

Ce sont les normes avec lesquelles je travaille et parfois vous ajoutez des requêtes multimédias entre les deux pour vous assurer que certains éléments spéciaux s'adaptent. J'aime commencer à écrire du CSS pour s'adapter aux écrans de 320 pixels, puis ajouter une requête multimédia pour une largeur minimale de 400 pixels et effectuer des ajustements de taille pour les téléphones plus grands si nécessaire, comme augmenter la taille des polices, la taille des icônes, etc. Je commence à 320 pixels car c'est le plus petit écran possible que vous rencontrerez, donc si vous voulez être pleinement réactif, nous devons les prendre en considération, puis ajouter une nouvelle requête multimédia pour les téléphones plus grands et adapter le site à eux également pour le meilleur expérience utilisateur et conception.

Pour être vraiment 100 % réactif, définissez le paramètre de votre inspecteur sur "responsive", commencez à 320 px, puis faites glisser le bord de la fenêtre et faites-la agrandir. Chaque fois que quelque chose dans la conception se casse ou semble mauvais, définissez une requête multimédia pour cette taille d'écran spécifique et corrigez-la. Faites cela jusqu'au-delà de la largeur du bureau. En procédant de cette façon, votre site s'adaptera à toutes les tailles d'écran possibles et vous pouvez dire qu'il est 100 % réactif.

Ceci est votre nouvel écran de travail. Le début de votre feuille CSS commencera par le code permettant d'adapter votre contenu à ces frontières. C'est pourquoi on l'appelle « mobile first ». Le bureau d'abord nous obligerait à coder à partir d'une largeur d'environ 1 500 px, puis à le réduire. C’est l’ancienne façon de faire les choses et vous devriez l’éviter autant que possible.

Configurer vos requêtes média

Lors de la rédaction de vos requêtes multimédias, j'utilise toujours min-width. Je ne fais pas de plage ni de largeur maximale. En effet, lorsque vous utilisez des largeurs minimales, tout le style des requêtes multimédias précédentes s'applique toujours à l'étape suivante, et seul le nouveau CSS pour cette taille d'écran est chargé en plus de ce qui l'a précédé. Cela vous évite d'avoir à répéter le code ou à refaire des sections encore et encore. Ils continuent simplement à passer à la taille d'écran suivante où ils sont modifiés. Chaque avancée devrait vous rapprocher de plus en plus de la version de bureau du site. Vous ne vous contentez pas de créer la conception du bureau à partir de zéro, vous la construisez de sorte que lorsque vous arrivez à ce point, tout le gros du travail a déjà été chargé à partir du mobile, il ne reste plus qu'un redimensionnement ou des ajustements supplémentaires pour couronner le tout et créer la navigation de votre bureau et la conception finale du pied de page.

C'est d'abord la beauté du mobile. Au lieu de commencer par la taille du bureau et de tout réduire ou de réécrire certaines parties à mesure que vous devenez plus petit, vous commencez petit et vous y ajoutez étape par étape en vous basant sur le code que vous avez écrit précédemment plutôt que de le détruire. Cela se marie parfaitement avec un design réactif car il est plus facile de faire pousser les choses dans leurs conteneurs plutôt que de les y mettre et de les presser. Nous devrions donc parvenir à des conceptions 100 % réactives avec moins de travail, moins de bugs et moins de maux de tête. C’est pourquoi j’ai commencé à parler du mobile first « first ». Cela rend la conception réactive beaucoup plus facile à réaliser de cette façon. Alors avec cela, voyons COMMENT nous pouvons les rendre réactifs sans trop de travail ni 50 requêtes multimédias.

Comment créer des sites Web réactifs

Lorsque vous essayez de créer des sites Web réactifs, il est important de commencer par définir la structure HTML et d'utiliser du HTML sémantique. J'utilise la même structure pour tous mes sites, qui consiste à diviser la conception en sections, chacune vivant dans sa propre balise de section, et à l'intérieur de celles-ci ont leur propre div .container, et à l'intérieur de celle-ci se trouvent le contenu. Comme ça :

<section id="section-id">
    <div class="container">
        <p class="DTspan">Place content here</p>
    </div>
</section>

La balise section permet d'indiquer à Google et aux lecteurs d'écran que cette section est différente des autres qui l'entourent. Ils sont autonomes et toutes les informations qu’ils contiennent sont pertinentes et liées à l’objectif des sections. C'est mieux ainsi, car si nous les créons tous en div, cela peut rendre les choses un peu compliquées et difficiles pour les robots d'exploration Web de Google de regrouper les informations et non seulement de comprendre quel est le contenu, mais aussi ce qu'il SIGNIFIE dans le contexte des éléments qui l'entourent.

J'aime placer des conteneurs individuels à l'intérieur de chaque section, car toutes les sections peuvent ne pas avoir la même largeur. J'ai vu de nombreux sites Web avec une classe conteneur enveloppant l'ensemble du site Web et tout reste dans cette largeur. C'est ennuyeux. Et cela limite ce que vous pouvez créer. En disposant de conteneurs individuels, vous avez plus de contrôle sur ce qui peut être fait dans ces sections et n'êtes pas limité à la même largeur que le reste de la page.

Mise en place de vos conteneurs

J'aime avoir une feuille CSS globale qui est utilisée sur toutes les pages afin que ces styles puissent être modifiés une fois et ils changent sur toutes les pages, comme le code d'en-tête et de pied de page, les styles de page principale comme les polices, les couleurs et les boutons, et le comportement de tous les conteneurs.

Bien que nous ayons des conteneurs individuels dans chaque section, nous souhaitons toujours avoir certains styles qu'ils partagent tous en commun afin qu'ils se comportent de la même manière. Voici ce que j'utilise sur chacun d'eux pour commencer à 320 px :

.container {
    padding: 0 10px;
    margin: auto;
    position: relative;
    width: 100%;
    max-width: 450px;
}

WHY: J'ai réglé le conteneur sur une largeur de 100 % pour qu'il grandisse avec la taille de l'écran. C'est 100% de la largeur de la taille de l'écran. C'est ainsi que vous les faites grandir - en utilisant des pourcentages comme largeurs. Ensuite, définissez la marge sur "auto". Lorsque vous le réglez sur auto, il calcule "automatiquement" les marges gauche et droite pour centrer le conteneur horizontalement sur l'écran. Tout élément dont l'affichage est défini sur block et la marge définie sur auto sera toujours centré horizontalement dans son conteneur ou dans la fenêtre du navigateur. Ainsi, lorsque le conteneur cesse de croître, quel que soit le pixel de largeur maximale que vous lui avez défini, il reste centré sur l'écran. Ensuite, réglez le remplissage sur padding: 0 10px pour ajouter un remplissage à gauche et à droite. Padding ajoute de l'espace À L'INTÉRIEUR d'un élément, tandis que margin ajoute de l'espace autour de lui. En ajoutant un remplissage à gauche et à droite de vos conteneurs, cela donne ce tampon de 10 pixels entre le contenu à l'intérieur et le bord de l'écran. Même si vous souhaitez que votre conteneur fasse 100 % de la largeur de l'écran bord à bord, vous ne voulez pas que votre contenu touche à 100 % bord à bord. Ça n'a pas l'air bien. Ainsi, en ajoutant cet espace À L'INTÉRIEUR du conteneur pour « rembourrer » les côtés gauche et droit, vous créez un petit pare-chocs sur lequel votre contenu pourra s'asseoir au lieu de l'écran.

Dans cette image, lorsque nous survolons un conteneur dans l'inspecteur, nous voyons les barres vertes à droite et à gauche. C'est votre rembourrage.

En revenant en arrière, la largeur maximale lui indique à quelle largeur de pixels arrêter de croître. Le meilleur moyen "rapide" de maintenir une conception cohérente pour toutes ces tailles d'écran étranges entre mobile et tablette est de définir vos conteneurs pour avoir une largeur maximale d'environ 450 pixels, ce qui est juste un peu plus grand que le plus grand écran de téléphone. De cette façon, entre 450 px et 568 px (mode paysage sur les téléphones), les conteneurs restent 450 px et le design ne « grandit » plus que cela. Les éléments à l’intérieur de ces conteneurs restent là où ils se trouvent. Le seul inconvénient est que le contenu aura beaucoup d’espace à gauche et à droite et pourrait ne pas être le meilleur. Mais c’est le moyen le plus rapide et le plus sale de le rendre pleinement réactif. Ce que je conseille en fait, c'est d'ajouter des requêtes multimédias supplémentaires et de modifier la conception et la taille de vos éléments à l'intérieur des conteneurs pour remplir l'écran à toutes les tailles possibles - si vous avez le temps de faire l'effort. Cela peut prendre un peu de temps, mais la qualité globale de l'apparence du produit sera bien meilleure. Faites simplement ce que j'ai mentionné plus tôt et augmentez la taille de la fenêtre du navigateur et là où la conception se brise n'importe où sur la page, définissez une requête multimédia pour cette taille et corrigez-la, et ainsi de suite.

Donc, si vous voulez être vraiment réactif, définissez une largeur maximale de votre conteneur sur 1000 px, ce qui sera la taille parfaite lorsque vous arriverez à la section de taille 1024 px de votre CSS. Ensuite, lorsque vous montez plus haut, vous pouvez modifier la largeur maximale comme elle doit être pour les différentes sections. Il n'y a pas de "largeur unique pour les gouverner tous", tout dépend entièrement de votre conception et peut être différent pour plusieurs sections et tailles de requêtes multimédias. C'est OK!

Dans l’ensemble, il s’agit du modèle de base auquel vous devez vous habituer afin de commencer à utiliser la conception réactive mobile first dans vos sites Web. Vous avez votre section avec une classe de conteneur à l'intérieur et le contenu de la section à l'intérieur de ce conteneur. Le conteneur est défini sur une largeur de 100 % et une largeur maximale à laquelle vous souhaitez qu'il cesse de croître, et la marge automatique le maintiendra centré, tandis que le remplissage à gauche et à droite empêchera le contenu de toucher les bords de l'écran. C'est l'élément de base du design réactif et ce sera une méthode dans laquelle vous utiliserez BEAUCOUP, il est donc important de vraiment engager ce modèle dans la mémoire musculaire. Vous pouvez également définir votre contenu sur width:100% ainsi, il peut grandir avec la taille de son contenant. Assurez-vous simplement de vérifier la conception de la page à mesure que vous augmentez la largeur de l'écran et de voir quelle section est coupée ou regardée et définissez une requête multimédia spécifique pour la cibler.

Comment planifier votre HTML pour mobile en premier

Passons maintenant à la partie amusante ! Lorsque vous recevez une conception de bureau, comment structurez-vous votre code HTML pour une transition optimale du mobile au bureau ? La première chose que vous devez faire est d'analyser chaque SECTION individuellement et de décomposer la conception en ses conteneurs et les pièces qu'ils contiennent. Voici un exemple de conception de mon site Web :

Ordre d'empilement en HTML

Lorsque vous écrivez votre code HTML, vous devez garder à l’esprit la façon dont les éléments s’empilent en fonction de l’ordre dans lequel ils apparaissent dans le code. Si vous avez trois éléments, dans l'ordre de haut en bas, l'élément du haut sera évidemment en premier sur mobile, et sur ordinateur s'ils doivent être empilés horizontalement alors il sera sur le côté gauche, l'élément du milieu sera au milieu et le dernier apparaîtra à droite.

<div id="top">
    <div class="container">Code stuff</div>
</div>

<div id="middle">
    <div class="container">Code stuff</div>
</div>

<div id="right">
    <div class="container">Code stuff</div>
</div>

C'est un concept simple, que beaucoup connaissent probablement déjà, mais je voulais le glisser pour ceux qui auraient pu manquer cette partie ou qui auraient besoin de le savoir. Lorsque vous écrivez votre code HTML et structurez vos éléments, gardez à l'esprit que le fait d'aller de haut en bas en HTML finira par s'empiler de gauche à droite lorsqu'il y aura suffisamment d'espace.

Éléments de niveau bloc (display:block) apparaissent sur leurs propres lignes. Donc, en commençant par le haut, avec « Ce que nous faisons », les graphiques et le paragraphe, quelle est la façon la plus simple de coder cela en utilisant le moins de divs (le cas échéant) possible ? Devriez-vous envelopper ces éléments dans un seul conteneur et travailler avec eux à l’intérieur de celui-ci ?

Quand je vois cela, je vois d'abord les éléments au niveau du bloc qui peuvent se trouver sur leur propre ligne sans personne à côté d'eux, comme le titre et le paragraphe. Je peux les définir sur display:block et text-align:center. Cela les centrera avec ou sans récipient autour d'eux, super ! Mais le groupe de graphiques semble DOIT être dans un conteneur séparé afin que nous puissions utiliser Flexbox pour travailler spécifiquement sur eux et les centrer. Donc, pour cette section, nous avons juste besoin d'un div de conteneur pour regrouper les graphiques afin qu'ils puissent être disposés, les deux autres peuvent simplement être des éléments de niveau bloc et évolueront très bien du mobile au bureau, car ils seront essentiellement dans les mêmes endroits exacts et se comporteront exactement de la même manière.

Passons maintenant au groupe de trois mini "cartes" centrées horizontalement. Parce qu'ils sont côte à côte, nous ne pouvons pas les rendre tous de niveau bloc, car ils doivent être alignés ensemble (display:inline-block), et non par eux-mêmes. Nous pouvons donc ajouter un div autour d'eux avec une classe de "wrapper" afin de pouvoir les organiser dans ce conteneur sans affecter le reste de la section au-dessus. Et à l'intérieur de ce conteneur, il semble que chaque "carte" doit également être entourée d'un conteneur, appelons-le "élément", et chaque élément à l'intérieur peut être des éléments de niveau bloc puisqu'ils sont tous seuls sur leur propre ligne. Il semble donc que c'est là que nous pouvons arrêter d'ajouter des conteneurs.

Je sais que cela fait beaucoup de choses à prendre en compte dans le texte, alors voici un graphique montrant comment nous avons tout regroupé visuellement pour planifier leur positionnement et leur disposition CSS :

Cela peut être petit pour voir si vous êtes sur mobile, mais la boîte rouge correspond à vos balises de section, et à l'intérieur se trouve votre conteneur (boîte verte), et les boîtes bleues sont les conteneurs de contenu supplémentaires que nous devons utiliser afin d'organiser ces éléments sans gâcher les autres éléments. Nous les "contenons" afin qu'ils puissent être manipulés séparément du reste de la section. Les cases orange sur les côtés gauche et droit de votre conteneur sont votre marge : centrage automatique du conteneur à l'intérieur des balises de section. Les boîtes noires sont les conteneurs « d'éléments » que nous utilisons pour envelopper chaque groupe individuel afin de contenir le contenu. Les éléments à l'intérieur d'eux peuvent tous être réglés sur display:block, text-align:center, margin:auto pour les centrer verticalement et horizontalement dans le conteneur .item.

Voici à quoi devrait ressembler la version mobile avec la structure HTML donnée et l'empilement naturel des éléments HTML :

Vous pouvez commencer à « VOIR » comment le mobile peut être démarré en examinant la structure de la conception du bureau, en la décomposant en éléments de niveau bloc et en conteneurs. C'est techniquement la meilleure façon de structurer le code HTML pour cette conception en utilisant le moins de divs possible. Je dis techniquement parce que nous pourrions même supprimer le div principal .container autour de tout, car il semble qu'il ne soit pas nécessaire de servir de barrière contre laquelle les éléments peuvent se heurter. Je l'ai laissé sur l'image du bureau pour montrer à quoi il ressemble. Si nous supprimons la classe .container, comment pensez-vous que le contenu peut rester centré ? Les divs sont des éléments de niveau bloc par défaut, donc votre classe .wrapper autour des trois .items a juste besoin margin:auto pour se centrer horizontalement dans les balises de section. Voici à quoi devrait ressembler le code HTML :

<section id="what-we-do" class="section">
    <h2><span>WHAT </span> WE DO</h2>
    <div aria-hidden="true" class="icons">
        <img src="/images/line.svg" alt="" />
        <img src="/images/code.svg" alt="" />
        <img src="/images/line.svg" alt="" />
    </div>
    <p>
        We specialize in small business Sites web and development for clients anywhere in the US. Every line of code is written by hand to ensure the best performance, which helps
        bring in more customers to your site and bring more revenue to your business.
        <a href="/blog/articles/what-is-the-difference-between-hand-coded-websites-and-wordpress-sites.html#blog-post">LEARN MORE</a>
    </p>
    <div class="wrapper">
        <div class="item">
            <img aria-hidden="true" src="/images/graphic.svg" alt="" />
            <h3>Mobile-First Design</h3>
            <p>We start building your site for mobile devices first, then we add on to it to make tablet and desktop.</p>
        </div>
        <div class="item">
            <img aria-hidden="true" src="/images/graphic.svg" alt="" />
            <h3>Fully Responsive</h3>
            <p>Your website will fit all mobile screens sizes, tablets, and desktop sizes so new clients can access your site from anywhere.</p>
        </div>
        <div class="item">
            <img aria-hidden="true" src="/images/graphic.svg" alt="" />
            <h3>Optimization</h3>
            <p>60% of all internet traffic is on mobile devices, so we optimize your mobile to perform their best in search engines.</p>
        </div>
    </div>
</section>

Copiez ce code HTML et voyez si vous pouvez recréer la mise en page vous-même dans votre propre éditeur de code. J'ai supprimé le .container de cette conception car il n'est pas nécessaire et notre objectif lors de l'écriture de code HTML est d'utiliser le moins de divs possible. Cela nous permettra d’écrire du code plus propre, plus performant et plus facile à comprendre.

C'est ainsi que vous devez examiner les conceptions afin de planifier correctement leur apparence et leur comportement, du mobile au bureau, et c'est la première chose que vous devez faire avant d'écrire du code. Vous devez analyser les sections individuelles et planifier votre structure HTML en fonction de ce qui peut être des éléments de niveau bloc et de ce qui nécessite des conteneurs. Déterminer COMMENT vous allez regrouper les éléments vous aidera à voir comment les pièces du puzzle peuvent s'organiser du mobile au bureau.

Vous remarquerez également l'utilisation de aria-hidden="true", il s'agit d'un attribut Aria qui indique aux lecteurs d'écran d'ignorer cet élément car il n'est pas important. Nous l'utilisons pour tout ce qui est utilisé uniquement à des fins de conception et n'a aucune importance pour la compréhension du contenu du site. Donc, fondamentalement, toutes les icônes auraient cet attribut puisqu'elles sont juste pour le spectacle et n'ajoutent rien à la compréhension des lecteurs de ce qu'ils lisent. Pour en savoir plus sur l'accessibilité du Web et l'utilisation des attributs Aria appropriés, visitez www.w3.org pour en savoir plus à leur sujet et quand les utiliser. C'est quelque chose que vous devrez beaucoup utiliser lors de l'écriture de votre code HTML. Gardez-les toujours à l’esprit !

Donc si nous devions coder ce mobile en premier, nous commencerions par le haut. Je vais utiliser une méthode à l'ancienne pour centrer le contenu sans Flexbox sur celle-ci pour montrer une autre façon de faire les choses. Lorsque vous avez des éléments de bloc en ligne dans un conteneur, si vous ajoutez text-align:center sur le conteneur, tous les blocs en ligne seront désormais centrés à l'intérieur du conteneur. vertical-align : le milieu centre les éléments de bloc en ligne verticalement à l'intérieur de leurs conteneurs. C'est une jolie petite propriété que j'utilise de temps en temps.

h2 {
    display: block;
    text-align: center;
}

.icons {
    margin: 15px auto; /*create 15px space top and bottom between the icons group... */
    text-align: center; /* ...and the h2 and p tags */
}

.icons img {
    display: inline-block;
    margin: 0 10px;
    vertical-align: middle;
}

p {
    display: block;
    margin: auto;
    text-align: center;
    padding: 0 10px;
    width: 100%;
    max-width: 600px;
}

On peut ensuite créer un espace entre les images en ajoutant une marge à gauche et à droite de chaque image avec margin:0 10px. Cela ajoute 0 marge en haut et en bas et 10 px de marge à gauche et à droite. Il s'agit d'un moyen très rapide et simple de centrer et d'espacer des éléments à l'intérieur d'un conteneur à l'aide de la propriété inline-block. Vous pouvez également utiliser text-align: left or right et il poussera tous les éléments vers la gauche ou la droite du conteneur. Voici à quoi cela devrait ressembler :

J'ai ajouté le width:100% and max-width:600px à la balise p parce que je veux qu'elle s'élargisse avec l'écran et s'arrête à 600 pixels, ce qui correspond à la largeur qu'elle finira par atteindre sur le bureau. Ainsi, lorsque nous arriverons à la tablette, elle aura déjà la taille de son ordinateur de bureau et nous n'aurons pas besoin d'y toucher lorsque nous arriverons au bureau. Moins de travail ! Il a également un remplissage gauche et droit de 10px puisque nous n'utilisons plus le conteneur. Il aura besoin de quelque chose pour l'empêcher de toucher les bords de l'écran. Ainsi, lorsque nous avons des éléments sans conteneur principal contre lesquels appuyer, nous pouvons simplement ajouter le rembourrage à gauche et à droite qui aurait été là avec le conteneur.

En ce qui concerne le CSS sur la façon dont vous organiserez et centrerez les 3 cartes, je recommande fortement d'apprendre à utiliser flexbox à partir de Flexbox Grenouille et entraînez-vous à l'utiliser. Je n'entrerai pas dans flexbox ici car cet article est déjà assez long... Mais pour le faire sans Flexbox, utilisez la même technique de inline-block que j'ai utilisée sur les images. Cela fera le même travail.

Mais! Je ne vous laisserai pas en suspens sur le code à utiliser, donc pour le conteneur .wrapper, voici le code que vous écririez sur le bureau :

Classe .item sur mobile :

Cela centrera les éléments et les empilera verticalement, et leur permettra de croître avec la taille de l'écran ne s'arrêtant qu'à 350 px de large tout en restant centré.

Ces éléments resteront ainsi tout au long de la tablette. Ainsi, lorsque vous atteignez cette taille d’écran, vous n’avez rien à faire !

Classe .wrapper sur le bureau :

.wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

Lorsque vous arrivez sur le bureau, le code ci-dessus est ce que vous devez utiliser. Flexbox et CSS Grid sont les outils fondamentaux pour créer des sites Web réactifs. J'utilise Flexbox sur tout mon site. Avec seulement quelques lignes de code, vous pouvez réorganiser complètement l'empilement et l'emplacement des éléments à l'intérieur des conteneurs flexibles. Après avoir lu cet article, je suggère fortement d'apprendre et de pratiquer avec Flexbox et Grid.

Conclusion

Ce sont toutes les bases de la programmation mobile first responsive et comment la configurer. J'espère que cela vous aidera à comprendre comment configurer votre CSS pour commencer une conception réactive d'abord mobile. Cela demande de la pratique et un certain temps d'adaptation, mais une fois que vous avez compris la formule et que vous êtes vraiment doué pour décomposer la conception de chaque section en leurs structures les plus basiques et minimales, tout cela deviendra une seconde nature pour vous et vous pourrez éventuellement simplement regarder une conception de bureau et "savoir" exactement comment vous allez la construire. Cela vous rendra beaucoup plus efficace dans votre temps, et votre code sera écrit plus proprement et avec plus de finalité, ce qui minimisera le nombre de bugs et de maux de tête que vous pourriez rencontrer au cours du processus.