HTML5 et CSS3 développeurs Web peuvent utiliser AJAX pour rendre un site mobile en réponse. Une façon de faire un travail de site bien sur plusieurs résolutions est de fournir différentes règles CSS basées sur le type de support détecté.

CSS3 a une nouvelle fonctionnalité appelée merveilleuse requête des médias, qui vous permet de spécifier un type de média et de déterminer diverses caractéristiques de l'écran. Vous pouvez utiliser cette spécification pour construire un sous-ensemble de la CSS qui doit être utilisé lorsque le navigateur détecte un certain type ou la taille de l'affichage.

Spécifiez un type de média

La media règle vous permet de spécifier quel type de sortie du CSS inclus devrait modifier. Les types de médias les plus courants sont écran, l'impression, de la parole, de poche, projection, et tv. Il n'y a plus, mais seulement impression et écran sont universellement pris en charge.

Par exemple, le code suivant spécifier 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 document CSS normale, mais il devrait normalement être placé à la fin du document, car il détient des exceptions aux règles normales. Vous pouvez placer autant de code CSS que vous le souhaitez à l'intérieur du media élément, mais vous ne devez mettre le code CSS qui est pertinente à la situation spécifique qui vous intéresse.

Comment ajouter un qualificatif

En plus de spécifier le type de support, le media règle a un autre truc très puissant. Vous pouvez appliquer une condition d'admissibilité aux médias.

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

Normalement, vous devriez utiliser cette astuce pour changer la mise en page, mais commencer avec cet exemple de changement de couleur simple. Voici le code pour cet exemple simple:

Qualifier Démo
Essayez de redimensionner cette page. Lorsque la page iswider de 500 pixels, il affiche le texte noir sur fond awhite.
Lorsque la page est plus étroit que 500 pixels, l'colorsreverse, donnant un texte blanc sur fond noir.

Voici comment construire une page qui adapte à la largeur de l'écran:

1. Construisez votre site comme d'habitude.

   Ceci est un endroit où toute cette “ séparer le contenu de la mise en page ” chose est vraiment rentable. Le même code HTML aura deux styles différents.

2. Appliquer un style CSS dans la voie normale.

   Construisez votre style standard de la manière habituelle - pour le moment, intégrer le style dans la page avec le tag. Votre style principal doit gérer le cas le plus fréquent. (En général, un ordinateur de bureau pleine taille.)

3. Construire un media régner.

   La media Règle CSS devrait aller à la fin de la CSS normale.

4. Définir une max-width: 500px qualificatif.

   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 plus petit que 500 pixels.

5. Placez règles de cas spéciaux à l'intérieur de la nouvelle série de style.

   Toutes les règles CSS que vous définissez à l'intérieur du media règle sera activée si le qualificatif est vrai. Utilisez ces règles pour remplacer le CSS existante. Notez que vous ne disposez pas de redéfinir tout. Juste fournir des règles qui font sens dans votre contexte particulier.

6. Ajouter une fenêtre.

   Navigateurs mobiles seront parfois essayer de redimensionner la page de sorte qu'il peut être vu tout à la fois. Ce encontre de l'objectif d'un style particulier, afin d'utiliser la fenêtre metatag pour indiquer que le navigateur doit présenter sa largeur réelle. Il est également souvent utile de désactiver la page mise à l'échelle, car il ne devrait plus être nécessaire.

Dans cet exemple, le navigateur applique toujours le principal (texte noir sur un fond blanc) style. Ensuite, il se penche sur la media exclure pour voir si le qualificatif est vrai.

Si la largeur est inférieure à 500 pixels, la max-width: 500px qualification est évaluée à vrai, et tout le code CSS à l'intérieur du media segment est activé. Le navigateur stocke ensuite les deux ensembles de CSS et applique la bonne CSS fondée sur le statut de la règle.