Comment faire un site Web pour mobile Responsive Design en CSS ()
L'utilisation des médias et des requêtes Viewport pour Design Mobile Ready
Site Web adaptatif
Dans une conception adaptée, nous présenterons la même page web que les utilisateurs d'ordinateurs de bureau ou portables voir à votre public mobile. Seules les feuilles de style en cascade, ou CSS, seront différents. Cela est, les navigateurs sur les ordinateurs de bureau / ordinateur portable afficher la page en utilisant un ensemble d'instructions CSS, tandis que ceux sur les téléphones mobiles autres.
Cette méthode de travail non seulement vous permet d'économiser le travail de création d'un ensemble différent de pages pour chaque type d'utilisateur, mais aussi les tracas de maintenir ces 2 jeux au fil des ans, en essayant de les synchroniser.
Surmonter les paramètres par défaut de l'appareil mobile: Viewport
Étant donné que cette valeur par défaut de prétendre que le dispositif a une largeur de 980 pixels et mise à l'échelle automatique défaites le contenu de notre tentative de créer manuellement une expérience confortable pour les utilisateurs mobiles, il faut la remplacer avant de pouvoir faire quoi que ce soit significatif. Pour ce faire, ajoutez la balise HTML suivante au
section de votre page web:La balise meta viewport indique au-dessus du navigateur pour utiliser la largeur réelle de l'appareil avec un facteur d'échelle 1. Autrement dit, il n'est pas de prétendre qu'il a une autre largeur, ni à l'échelle le contenu afin qu'il tienne dans l'actuel fenêtre. Tout doit être utilisé tel quel. Cette instruction fait les navigateurs mobiles se comportent exactement comme leurs homologues de bureau.
La clé qui déverrouille une conception adaptée en CSS: Media Queries
Pour accomplir la magie comme ça, nous avons besoin d'un moyen pour détecter la taille de l'écran. Les navigateurs modernes offrent cette installation sous la forme d'une « requête de médias ».
Une requête de support dans une feuille de style ressemble à ceci:
/ * Code qui est ici appliquera à toutes les tailles d'écran * /
Notez que ce qui précède est juste un exemple destiné à illustrer l'utilisation de plusieurs blocs de requêtes de médias. Mon choix des numéros utilisés, il est arbitraire, donc ne pas passer du temps déconcertant sur eux.
Vous pouvez également mettre vos requêtes des médias dans le élément lui-même, de sorte que seule est appliquée une feuille entière lorsque cet ensemble particulier de conditions est remplie. Par exemple, les charges suivantes 3 feuilles de style, un soi-disant pour les appareils mobiles en mode portrait, un autre pour leur mode paysage, et la finale pour les ordinateurs de bureau et portables.
Cela vous permet de séparer proprement votre code pour différentes résolutions d'écran dans des fichiers différents, si c'est ce que vous voulez. Encore une fois, notez que le point de l'exemple ci-dessus est de démontrer l'utilisation de requêtes de médias dans Mots clés. Les chiffres sont arbitrairement sélectionnés.
Test de mode portrait et paysage avec les médias Requêtes
Au lieu d'utiliser des résolutions spécifiques pour savoir si un appareil est en mode portrait ou paysage, vous pouvez également utiliser la condition « orientation: portrait » et « orientation: paysage ».
Je tendance à ne pas utiliser ces car je trouve que de connaître le nombre de pixels disponibles plus utiles que de déterminer l'orientation du dispositif. Mais l'installation est disponible si vous avez besoin de l'utiliser.
Autres fonctions utiles dans les médias Requêtes
En dehors de ce qui précède, vous pouvez également insérer des tests pour min-height. hauteur maximum. largeur et hauteur.
De plus, vous pouvez commencer à la requête des médias avec « seulement », comme dans l'extrait suivant:
Très vieux navigateurs qui ne comprennent pas la syntaxe moderne des requêtes des médias penseront que « seulement » est un type de dispositif (comme « écran » ou « print » ou « parole »). Et comme ils pensent que les règles du bloc sont destinés à des appareils classés comme « seulement », ils ne seront pas les suivre. Les navigateurs modernes, d'autre part, ignorer le mot « seulement » (par la conception), donc ce test conditionnel est utile si vous avez besoin de se prémunir contre les anciens navigateurs analyse vos règles mobiles seulement et de les appliquer même sur un ordinateur de bureau.
Si vous souhaitez utiliser CSS pour toutes les situations, sauf si certaines conditions sont remplies, vous pouvez utiliser « non » avant votre état, comme dans l'exemple suivant.
(Notez que depuis que je n'ai pas précisé « écran » dans l'exemple ci-dessus, elle implique « tous » ce qui signifie que tous les appareils.)
Attention cependant, « non » est traité comme « seulement » dans les navigateurs très vieux. Autrement dit, il sera interprété comme un type d'appareil et donc la feuille de style dans le bloc qui suit sera pas appliquée.
Résolutions d'écran mobiles / Largeurs
Voici une liste des largeurs d'écran du navigateur de certains appareils mobiles couramment utilisés. La liste est pas exhaustive, puisque de nouvelles marques et modèles sont libérés tout le temps. Cependant, la liste est assez pour vous donner une idée des types de tailles que vous devez accueillir.
- 240 pixels (old mode portrait applications)
- 320 pixels (iPhone 3 à 5 et iPhone en mode portrait SE)
- 375 pixels (iPhone 6 et 7) portrait
- 384 pixels (applications portrait Nexus)
- 414 pixels (iPhone 6 Plus et 7 portrait Plus)
- 480 pixels (iPhone 3 et 4 en mode paysage)
- 568 pixels (iPhone 5 paysage)
- 600 pixels (paysage applications Nexus, portrait Kindle)
- 667 pixels (iPhone 6 et 7) paysage
- 736 pixels (iPhone 6 Plus et 7 paysage Plus)
- 768 pixels (portrait IPAD)
- 1024 pixels (paysage IPAD)
Compatibilité avec les navigateurs Web
L'installation de requêtes des médias qui nous permet de tester la taille de l'écran est un retardataire sur la scène du navigateur Web. C'est-à-dire, CSS avait déjà existé pendant des années avant que la norme comprend les moyens d'appliquer à certaines conditions, règles à certaines tailles d'écran. En tant que tel, très anciens navigateurs ne prennent pas en charge ces fonctionnalités.
Sur les navigateurs de bureau / portable avant, le soutien semble avoir commencé avec IE 9, Firefox 3.5, Safari 4 et Chrome 4. Microsoft Edge, car il était à l'origine basée sur le code IE 11, a toujours eu le soutien des questions des médias.
Chapitre suivant
Il apparaîtra sur votre page: