Adaptatif en HTML

Le design réactif en HTML est le concept qui adapte l'élément HTML en fonction de la taille de l'appareil pour chaque taille d'écran. Ces éléments doivent être parfaits sur tous les appareils comme les mobiles, les ordinateurs de bureau ou les tablettes. La conception réactive est la chose dans laquelle l'élément s'ajuste rapidement en fonction de l'espace disponible dans la vue d'affichage. Il est basé sur des éléments tels que la largeur de la fenêtre d'affichage, la taille du texte, l'image réactive et d'autres éléments. De nos jours, il existe de nombreuses nouvelles techniques impliquées dans le terme de conception réactive pour perfectionner la conception avec différents navigateurs et appareils. Les requêtes multimédias sont l'une des meilleures parties, y compris dans la conception réactive via CSS, qui indique au navigateur de s'ajuster en fonction de la taille de l'appareil de son utilisateur.

Syntaxe utilisée dans la conception réactive HTML

La conception réactive en HTML dépend de nombreux facteurs ; voyons-les un par un :

1. Définition de la fenêtre : La syntaxe ci-dessous est utilisée pour définir la fenêtre d'affichage sur la vue de la page utilisateur, ce qui aide le navigateur à contrôler les dimensions de la page Web et sa mise à l'échelle. Il ajustera automatiquement les éléments en fonction des différentes tailles d'appareil et affichera les écrans en fonction de l'appareil.

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

2. Images réactives : Chaque fois que vous ajoutez des images à notre page Web, il est également nécessaire d'afficher ces images dans la taille appropriée sur la taille de l'écran de chaque appareil.

<div class='section content'>  <img class='example' src='images/example.svg' /></div>

3. Définir la propriété de largeur : Avec l'aide de CSS, nous pouvons définir la largeur à 100 %, ce qui permet de rendre l'élément réactif dans la vue d'affichage à l'écran.

width: 100%;

4. Utilisation de la propriété Max width : identique à la largeur, on peut définir la largeur maximale de l'élément à 100 %, cela nous aidera donc à afficher tous nos éléments HTML dans le format réactif approprié.

Max-width:100%;

5. Texte réactif : Comme pour un autre élément, il est nécessaire de rendre le texte également responsable sur tous les appareils en fonction de leur taille d'écran. Il peut être défini à l'aide de VW, ce qui aide l'utilisateur à définir la largeur de la fenêtre d'affichage pour ajuster facilement la taille du texte en fonction de l'écran de l'appareil. Cette syntaxe explique que la fenêtre d'affichage est appelée taille d'affichage du navigateur. Ici, 1 VW est égal à 1 % réel de la largeur de la fenêtre.

<h4 style="font-size:5vw">Text</h4>

6. Utilisation des médias Requêtes : Les requêtes multimédias jouent un rôle important dans la conception réactive pour rendre le texte, l'image et d'autres éléments plus réactifs pour différentes tailles d'appareils et différentes tailles de navigateurs. Il existe aujourd’hui différents frameworks pour rendre notre page Web plus réactive. Ils sont comme :

• Responsive Stylesheet : ce framework nous aide à utiliser différents frameworks de feuilles de style comme W3.CSS, qui joue le rôle principal lors de la création d'un design réactif. Par défaut, il prend en charge la conception axée sur le mobile. Il est facile d'apprendre et de se développer.
• Bootstrap : C'est le framework le plus populaire qui se développe rapidement et est disponible gratuitement pour l'utilisateur. Il est plus convivial que les autres frameworks car il est basé sur des langages de développement Web tels que HTML, CSS et jquery, ce qui contribue à rendre les pages Web plus réactives.
• Dernier CSS réactif : Il prend en charge différents types de navigateurs ainsi que tous les types d'appareils comme les smartphones, les tablettes, les ordinateurs portables, etc.

Exemples d'implémentation du Responsive en HTML

Vous trouverez ci-dessous les exemples de Responsive en HTML.

Exemple n°1

Dans cet exemple, nous définissons la fenêtre d'affichage dans le code HTML et avons également rendu l'image réactive.

Code HTML :

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h2>Responsive Design by setting Viewport</h2>
<p>Setting specific width to the screen which will adjust screen as per device on which we are going to display our webpage.</p>
<img src="images.jpg" >
</body>

Sortie sur écran de bureau ou d'ordinateur portable :

Sortie sur les appareils mobiles :

Sortie sur tablette :

Exemple n°2

Dans l'exemple 2, nous rendons l'écran réactif à l'aide de requêtes multimédias. Cela nous aidera à rendre les pages Web réactives en prenant en charge divers navigateurs ainsi que sur divers appareils également en utilisant le code :

Code HTML :

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing:border-box;
}
.top {
background-color:#00ff00;
padding:20px;
float:left;
width:30%;
}
.middle {
background-color:#800000;
padding:20px;
float:left;
width:40%;
color:white;
}
.bottom {
background-color:#00ffff;
padding:20px;
float:right;
width:30%;
}
@media screen and (max-width:800px) {
.top, .middle, .bottom {
width:100%;
}
}
</style>
</head>
<body>
<h2>Responsive Design in HTML using Media Queries</h2>
<p>We will see web page on different devices by resizing browser window</p>
<div class="top">
<h4>First Content Part</h4>
<img src="images.jpg">
</div>
<div class="middle">
<h4>Second Content Part</h4>
<img src="images.jpg">
</div>
<div class="bottom">
<h4>Third Content part</h4>
<img src="images.jpg">
</div>
</body>

Sortie sur la vue du bureau :

Sortie sur les appareils mobiles : Dans l'appareil mobile, l'écran de sortie pourra défiler, donc pour voir la page Web entière, nous devons faire défiler l'écran vers le bas.

Sortie sur la tablette : La même sortie sera ajustée en fonction de la taille de la tablette.

Exemple #3

Voyons un autre exemple 3 utilisant bootstrap, CSS standard et requêtes multimédia :

Code HTML :

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.options {
float:left;
width:20%;
text-align:center;
}
.options a {
background-color:#e5e5e5;
padding:8px;
margin-top:7px;
display:block;
width:100%;
color:black;
}
.main {
float:left;
width:60%;
padding:0 20px;
}
.course {
background-color:#ff8000;
color:white;
float:left;
width:20%;
padding:10px;
text-align:center;
}
#header
{
background-color:#003333;
padding:10px;
text-align:center;
color:white;
}
#footer{
background-color:black;
text-align:center;
padding:10px;
margin-top:7px;
color:white;
@media only screen and (max-width:620px) {
/* For mobile phones: */
.options, .main, .course {
width:100%;
}
}
}
</style>
</head>
<body>
<div id="header">
<h1>Welcome to EDUCBA</h1>
</div>
<div style="overflow:auto">
<div class="options">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Career</a>
<a href="#">Contact us</a>
</div>
<div class="main">
<h2>WHO IS EDUCBA?</h2>
<p> Learn Graphic designing, Animation, Game Development, Video Editing & more with our Online Certification Courses</p>
</div>
<div class="course">
<h3><b>Courses</b></h3>
<p>Data science</p>
<p>Marketing</p>
<p>Excel</p>
<p>Design</p>
</div>
</div>
<div id="footer">© 2019 - EDUCBA. ALL RIGHTS RESERVED</div>
</body>
</html>

Output on Laptop Screen:

Output on Mobile Devices:

Output on Tablet:

Conclusion

Responsive design is done by using HTML and CSS language to make web page more responsive and user-friendly, which display properly on each and every device size. It uses the latest framework like W3.CSS, bootstrap and some media queries code.

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!