Que faut-il savoir sur les sites responsive ?

Qu'est-ce qu'un site web responsive ?

Si nous ouvrons un site Web réactif sur n'importe quel appareil, le contenu de chaque page Web ne débordera pas et ne sera pas couvert par d'autres pages Web. Par exemple, ouvrez le site Web TutorialsPoint.com sur un appareil de n'importe quelle taille. Les utilisateurs peuvent constater que le contenu de la page Web reste le même, mais que le remplacement du contenu devient différent pour que le contenu soit lisible.

Ainsi, l'essentiel d'un site Web réactif est de rendre le contenu visible et élégant sur chaque appareil.

Pourquoi avons-nous besoin d'un site Web réactif ?

Maintenant, la question est de savoir pourquoi nous devrions exiger un site Web réactif. Eh bien, voici la réponse.

Auparavant, les utilisateurs pouvaient accéder au site Web uniquement à partir d'un ordinateur de bureau, mais désormais, les utilisateurs peuvent accéder au site Web à partir d'appareils de différentes tailles, tels que des appareils mobiles et des tablettes. Même la plupart du trafic sur les sites Web provient d’appareils mobiles et non d’appareils de bureau.

De nos jours, chaque entreprise opère sur Internet et essaie d'attirer des clients en ligne via son site Web. Si un utilisateur accède à votre site Web à partir d'un appareil mobile et que votre site Web n'a pas un design réactif, l'utilisateur fermera immédiatement votre site Web et accédera au site Web d'un concurrent.

Ainsi, un site Web réactif est utile pour attirer plus de clients et de visiteurs.

Comment commencer à créer un site web responsive ?

Nous devons utiliser des points d'arrêt communs basés sur les dimensions du navigateur et styliser les éléments HTML en conséquence. Voici les points d'arrêt courants.

Mobile: 360 x 640 px
Tablet: 768 x 1024 px
Laptop: 1366 x 768 px
HDdesktop: 1920 x 1080 px

Dans un premier temps, nous devons ajouter la balise méta suivante dans la section

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Désormais, notre contenu HTML restera le même que celui de la page Web, mais nous devons écrire le CSS de manière à ce que le contenu HTML puisse être facilement lu sur tous les appareils.

Exemple 1 (Définir les dimensions des éléments en pourcentage)

Dans l'exemple ci-dessous, nous avons un élément div « conteneur » contenant deux éléments div « col » Nous avons défini les dimensions de l'élément div conteneur dans le pourcentage et les dimensions de l'élément div « col » dans le pourcentage.

Dans la sortie, l'utilisateur peut constater qu'il est lisible sur n'importe quel appareil de taille.

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   


   
Creating the responsive website by setting up dimensions in percentage for the HTML element 
   

      

         Column 1
      
      

         Column 2
      
   

Exemple 2 (Utilisation de la requête multimédia)

Dans l'exemple ci-dessous, nous utilisons des requêtes multimédias pour créer une conception Web réactive. À l'aide de requêtes multimédias, nous pouvons ajouter des points d'arrêt aux pages Web et les styliser individuellement pour chaque appareil.

Ici, les utilisateurs peuvent constater que nous avons modifié les dimensions du div « principal » pour les appareils dont la largeur est inférieure à 600 pixels. Nous avons également modifié la taille de la police, la couleur de la police et la marge pour les appareils mobiles utilisant le média. requête.

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   


   
 Creating the responsive website by Using the media Queries in CSS 
   

      
      

         The above is a logo of TutorilasPoint. The logo is responsive, and it will be displayed in the centre of
         the screen.
      
   

Exemple 3 (en utilisant la fonction Clamp)

Dans l'exemple ci-dessous, nous avons utilisé la fonction clamp() pour rendre notre page Web réactive. La fonction clamp() prend trois arguments, le premier est la largeur minimale, le second est un pourcentage et le troisième est le maximum. largeur.

Ici, nous passons 400px comme premier paramètre, 30% comme deuxième paramètre et 600px comme troisième paramètre de la fonction clamp(), ce qui signifie que sur n'importe quel appareil, la largeur de la carte ne sera jamais inférieure à 400px, et pas plus de 600px. Si 30 % de la largeur de l'écran est comprise entre 400 px et 600 px, la valeur sera définie sur la largeur de la carte.

En sortie, les utilisateurs peuvent observer la carte sur différents appareils et vérifier si elle est réactive.

<html>
<head>
   <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
   <style>
      .card {
         height: 400px;
         width: clamp(400px, 30%, 600px);
         background-color: rgb(13, 247, 247);
         padding: 5px;
         border-radius: 12px;
         border: 2px solid green;
      }
      img {
         height: 90%;
         width: 100%;
         border-radius: 12px;
      }
      .content {
         font-size: 20px;
         font-weight: bold;
         text-align: center;
         padding: 10px;
         color: green;
      }
   </style>
</head>
<body>
   <h2> Creating the responsive website by Using the clamp() function in CSS </h2>
   <div class = "card">
      <img src = "https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg"
      Alt = "tree image">
      <div class = "content">
         Save the Environment!
      </div>
   </div>
</body>
</html>

Exemple 4 (Présentation de Flexbox)

Dans l'exemple ci-dessous, nous introduisons Flexbox pour créer des pages Web réactives. Nous pouvons utiliser "display flex" pour afficher n'importe quel élément HTML sous forme de Flexbox. Ensuite, nous pouvons utiliser diverses propriétés CSS pour personnaliser le contenu de Flexbox.

Ici, nous avons un div 'row' contenant plusieurs div 'col'. Les dimensions du div 'row' changent en fonction des dimensions de l'appareil, mais les dimensions du div 'col' sont donc fixes. Propriété CSS 'flex-wrap: wrap' pour envelopper le contenu à l'intérieur du div 'row'. Elle affiche le nombre total de div 'col' dans les lignes simples en fonction de la largeur de la ligne.

<html>
<head>
   <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
   <style>
      .row {
         height: auto;
         width: 90%;
         margin: 0 auto;
         background-color: yellow;
         padding: 10px 20px;
         border: 2px solid green;
         border-radius: 12px;
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
      }
      .col {
         height: 200px;
         min-width: 200px;
         background-color: red;
         border: 2px solid green;
         border-radius: 12px;
         margin: 10px 20px;
      }
   </style>
</head>
<body>
   <h2>Creating the <i> responsive website </i> by Using the media Queries in CSS. </h2>
   <div class = "row">
      <div class = "col">
      </div>
      <div class = "col">
      </div>
      <div class = "col">
      </div>
      <div class = "col">
      </div>
   </div>
</body>
</html>

Dans ce tutoriel, les utilisateurs ont appris à rendre un site Web réactif. L'exemple ci-dessus nous montre diverses propriétés, fonctions et règles CSS utilisées pour créer des sites Web réactifs. Les développeurs doivent combiner tout cela pour produire un site Web en direct. Ici, nous utilisons un seul attribut dans un seul exemple uniquement à des fins d'apprentissage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!