Grid. Les media-query et le responsive design CSS3 - Le Hollandais Volant. Le principe de base des media-queries Si vous voulez faire un site spécialement pour les mobiles et dont la détection plante la moitié du temps, libre à vous.
Mais sachez que vous pouvez vous en passer : le responsive design et les media queries rendent votre page lisible sur tous les écrans. Ces dernières permet de cibler du CSS spécifiquement à une taille d’écran. Par exemple, le code suivant appliquera du CSS uniquement aux écrans plus petits que 1024 pixels de large : @media (max-width: 1024px) { /* CSS ici */ } Ainsi, mon blog vu sur mobile possède un affichage en mode portrait différent et mieux adapté que celui du mode paysage : Il y a pas mal d’astuces pour le responsive design et je vais vous en montrer un maximum ici, en commençant par la base.
Quelques mots sur le « pixel-ratio » Sur les mobiles, bien que les écrans soient beaucoup plus petits, les définitions des écrans sont proches de celles qu’on trouve sur les ordinateurs. Pour comparer, voilà un bon affichage : Comme ceci : Dimensionner ses fontes avec rem. Par Jonathan Snook Déterminer quelle unité de mesure choisir pour la taille de notre texte peut mener à un débat houleux, même de nos jours.
Malheureusement, il existe toujours des avantages et inconvénients qui rendent ces différentes techniques peu désirables. La question est alors de savoir quelle solution est la « moins pire ». Les deux techniques suivantes sont le plus souvent utilisées : taille en px ; taille en em. Analysons ces deux approches avant que je ne révèle mon troisième atout. Dimensionnement avec px Au tout début du Web, nous utilisions les pixels pour dimensionner notre texte. Pour ma part, je suis du côté de ceux qui pensent que les mises en page en pixels apportent la cohérence nécessaire, et que les utilisateurs possèdent suffisamment d’outils dédiés à l’affichage pour arrêter de penser que l’accessibilité est si préoccupante. Dimensionnement avec em L’impossibilité totale de redimensionner le texte avec IE est une frustration permanente. Dimensionnement avec rem. Web mobile : introduction et glossaire. Le Web mobile a depuis longtemps envahi notre quotidien de concepteur de sites web : aujourd'hui, smartphones et tablettes font partie intégrante du parc de périphériques sur lesquels nous jouissons de notre dose quotidienne d'Internet, sur lesquels nous consultons nos sites web préférés, et pestons - à juste titre - lorsque celui-ci ne s'affiche pas correctement.
Afin de mieux dégrossir ce vaste sujet, voici une introduction à la conception web mobile sous forme d'un glossaire des principaux termes et d'une double méthodologie pratique. Glossaire Application native Correspond aux logiciels à télécharger que l'on peut trouver sur les boutiques "stores" (AppStore pour Apple, GooglePlay pour Android,…) développés dans un langage spécifique à chaque plateforme : Objective-C pour Apple, Java pour Android, … Application web (Web App) Une application web est le nom que l'on donne à un site web "classique" que l'on a adapté pour les mobiles.
Site web dédié Navigateurs mobiles. Qu'est-ce que le Responsive Web Design ? Tutoriel Vidéo HTML-CSS Design "Responsive" Screen Sizes. Responsive Web Design Introduction.