Comment créer un site mobile réactif en AJAX pour la programmation HTML5 et CSS3 - les nuls

Les développeurs web HTML5 et CSS3 peuvent utiliser AJAX pour créer un site mobile responsive. Une façon de faire fonctionner un site sur plusieurs résolutions est de fournir différentes règles CSS basées sur le type de média détecté.

CSS3 propose une nouvelle fonctionnalité appelée media query, qui vous permet de spécifier un type de média et de déterminer les différentes fonctionnalités de l'affichage. Vous pouvez utiliser cette spécification pour créer un sous-ensemble du CSS qui devrait être utilisé lorsque le navigateur détecte un certain type ou taille d'affichage.

Spécifier un type de support

La règle @media vous permet de spécifier le type de sortie que le CSS inclus doit modifier. Les types de média les plus courants sont l'écran, l'impression, la voix, l'ordinateur de poche, la projection et la télévision. Il y a plus, mais seulement l'impression et l'écran sont universellement supportés.

Par exemple, le code suivant spécifiera la taille de la police lorsque l'utilisateur imprime le document:

@media print {body {font-size: 10pt;}}

Ce CSS peut être intégré dans un CSS normal document, mais il doit généralement être placé à la fin du document car il contient des exceptions aux règles normales. Vous pouvez placer autant de code CSS que vous le souhaitez dans l'élément @media, mais vous ne devez placer que du code CSS adapté à la situation spécifique qui vous intéresse.

Comment ajouter un qualificateur

En plus de spécifier le type de média, la règle @media a une autre astuce très puissante. Vous pouvez appliquer une condition de qualification spéciale aux médias.

Lorsque le navigateur est plus large que 500 pixels, vous pouvez voir du texte noir sur un fond blanc. Mais rends l'écran plus étroit, et tu vois quelque chose d'intéressant.

Normalement, vous utiliseriez cette astuce pour changer la disposition, mais commencez par cet exemple de changement de couleur plus simple. Voici le code pour cet exemple plus simple:

narrowBlack. html body {couleur: noir; couleur de fond: blanc;} @media (max-width: 500px) {body {color: white; background-color: black;}}

Qualifier Demo
Essayez de redimensionner cette page. Lorsque la page est plus large que 500 pixels, il affiche un texte noir sur fond blanc.
Lorsque la largeur de la page est inférieure à 500 pixels, les couleurs inversées donnent un texte blanc sur fond noir.

Voici comment créer une page qui s'adapte à la largeur de l'écran:

1. Construisez votre site comme d'habitude.

   Il s'agit d'un endroit où tout ce contenu «séparer le contenu de la mise en page» est vraiment payant. Le même HTML aura deux styles différents.

2. Applique un style CSS de la manière habituelle.

   Construisez votre style standard de la manière habituelle - pour l'instant, intégrez le style dans la page avec le tag.Votre style principal devrait gérer le cas le plus commun. (Généralement, un bureau de taille normale.)

3. Générez une règle @media.

   La règle CSS @media devrait aller à la fin du CSS normal.

4. Définissez un qualificateur max-width: 500px.

   Ce qualificatif indique que les règles à l'intérieur de ce segment ne seront utilisées que si la largeur de l'écran est inférieure à 500 pixels.

5. Placez des règles de cas spéciales dans le nouvel ensemble de styles.

   Toutes les règles CSS que vous définissez dans la règle @media seront activées si le qualificateur est vrai. Utilisez ces règles pour remplacer le CSS existant. Notez que vous n'avez pas besoin de tout redéfinir. Fournissez simplement des règles qui ont un sens dans votre contexte particulier.

6. Ajouter une fenêtre.

   Les navigateurs mobiles essaieront parfois de redimensionner la page pour que tout soit visible à la fois. Cela annule le but d'un style spécial, utilisez donc la balise viewport pour indiquer que le navigateur doit indiquer sa véritable largeur. Il est également souvent utile de désactiver la mise à l'échelle des pages car elle ne devrait plus être nécessaire.

Dans cet exemple, le navigateur applique toujours le style principal (texte noir sur fond blanc). Ensuite, il regarde la règle @media pour voir si le qualificateur est vrai.

Si la largeur est inférieure à 500 pixels, le qualificatif max-width: 500px est évalué à true et tout le code CSS dans le segment @media est activé. Le navigateur stocke ensuite les deux ensembles de CSS et applique le code CSS correct en fonction du statut de la règle.