Comment rendre une page web reponsive?
Ce poste a été sugérée par un visiteurs commentez le poste en cliquant sur l'icone de commentaire
La responsive design est une méthodologie permettant de concevoir la page Web de manière à ce qu'elle s'adapte aux résolutions d'écran de divers appareils. Cela se fait en stylisant les éléments HTML en fonction des fonctionnalités de l'écran multimédia. Par exemple, cela sera fait par:
redimensionner des images , des vidéos.
envelopper les colonnes de la page Web par rapport à la priorité de lecture.
contrôler les dimensions avec des unités flexibles comme les pourcentages ou la valeur automatique .
définir le retour à la ligne pour envelopper les mots plus longs que la largeur de l'écran.
gestion des polices en fonction des résolutions d'écran, etc.
Ce didacticiel est basé sur l'expérience de la création de ce site Web phppot.com responsive. Maintenant, cela est également devenu lisible sur mobile, tablette et ordinateur de bureau.
Techniques
Il existe différentes techniques utilisées pour la conception de sites Web réactifs. Certains d'entre eux sont,
Les requêtes média CSS3 sont utilisées dans RWD en adaptant les composants de la page en fonction des propriétés du média.
Les grilles fluides créées avec une largeur de colonne ajustable automatiquement peuvent être utilisées pour une conception Web réactive.
Nous pouvons également utiliser des composants côté serveur (RESS).
Media Queries
La technique des requêtes médias est très simple et efficace. Ce module fait partie de la version CSS3. Une requête multimédia contient un type de média et des fonctionnalités multimédia suivis d'une ou plusieurs règles de conception. Par exemple,
@media screen and (min-width:768px) and (max-width:1024px) {
width:auto;
border: #A0A0A0 1px solid;
}où l' écran est le type de média et les largeurs minimale et maximale sont les fonctionnalités du média. Il existe de nombreuses fonctionnalités telles que la couleur, la hauteur, la numérisation, etc. Mais les plus largement utilisées sont la largeur et la résolution.
Peu de valeurs possibles pour les types de médias sont l'écran, l'ordinateur de poche, la télévision, etc. Dans cet exemple, nous utilisons @media at-rule pour spécifier le type de média. Nous pouvons également utiliser l' attribut média de la balise de lien HTML, @import at-rules.
Conceptions navigateurs
Les navigateurs mobiles prennent en charge les méta-propriétés de la fenêtre d'affichage pour adapter les pages Web à la largeur de l'écran. En définissant ces propriétés, nous pouvons contrôler la largeur, la hauteur et le niveau de zoom pour divers navigateurs mobiles tels que les navigateurs iPhone et Android.
Par exemple, cette balise meta sert à définir la largeur du contenu et le niveau de zoom.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>Nous pouvons également utiliser CSS pour définir les propriétés de la fenêtre en utilisant les règles @viewport . Par exemple, les méta-propriétés ci-dessus peuvent être définies comme suit :
@viewport {
width:device-width;
zoom:1;
} Image réactive
Ce code est utilisé pour mettre à l'échelle les tailles d'image en fonction de la largeur de l'écran. La propriété -ms-interpolation-mode concerne les compatibilités Internet Explorer 8 et 9.
img {
-ms-interpolation-mode: bicubic;
border: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
Appliquons le tuto
Laissez-nous concevoir une page Web avec un panneau de connexion réactif pour différentes tailles d'écran. Le code est,
<HTML>
<HEAD>
<TITLE>Responsive Web Design (Coding Team)</TITLE>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet" type="text/css" />
</HEAD>
<BODY>
<div id="page-content">
<?php
include_once ("header.php");
?>
<?php
include ("content.php");
?>
<?php
include ("footer.php");
?>
</div>
</BODY>
</HTML>
body {
background-color: #CCCCCC;
font-family: Arial;
line-height: 25px;
word-wrap: break-word;
}
#page-content {
margin: 0 auto 60px;
padding: 20px;
background-color: #FFFFFF;
}
#main-content {
float: left;
width: 80%;
}
#sidebar {
float: left;
width: 20%;
padding-top: 20px;
}
#header {
display: none;
}
#footer {
clear: both;
width: auto;
text-align: center;
border-top: #CCCCCC 2px solid;
}
#login-panel {
background-color: #EFEFED;
}
#sidebar input {
margin: 10px 20px;
max-width: 80%;
}
#header input {
margin: 10px;
max-width: 140px;
}
img {
-ms-interpolation-mode: bicubic;
border: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
@media screen and (min-width: 1224px) {
#page-content {
width: 70%;
}
}
@media screen and (min-width: 1044px) and (max-width: 1224px) {
#page-content {
width: 80%;
}
}
@media screen and (min-width: 844px) and (max-width: 1044px) {
#page-content {
width: 90%;
}
}
@media screen and (max-width: 844px) {
#page-content {
width: auto;
margin: 0;
}
#main-content {
float: left;
width: 100%;
}
#sidebar {
display: none;
}
#header {
display: block;
}
}
Résultats
Ce formulaire de connexion est affiché de manière réactive sur différents appareils. Par exemple, dans le navigateur de bureau, cette page réactive ressemble à,
Télécharger le code source
C'est tous pour aujoudh'hui veuillez laisser une commentaire en descandant en bas ou de cliquer sur l'icone de commentaire
7 commentaires