Javascript Girl
  1. Javascript Girl
  3. Répéter dynamiquement les mosaïques en fonction du navigateur de différentes tailles ou de l'écran mobile
Intereting Posts
Dialogue modal de confirmation en javascript Javascript dans une publication wordpress Comment recharger le widget google recaptcha après que l'utilisateur présente des entrées non valides Comment détecter / désactiver le défilement inertiel dans Mac Safari? ExecJS et n'a pas pu trouver un runtime JavaScript JQuery / JS: Obtenez le répertoire parent d'URL actuel Un seul clic déclenché sur un double clic Pourquoi JSON.stringify ne pas sérialiser les valeurs de prototype? Comment télécharger le fichier image et l'affichage à l'aide de nodejs express "Télécharger" au lieu de "ouvrir" un fichier texte Désinfection de l'entrée des utilisateurs avant de l'ajouter au DOM en Javascript Code javascript fonctionnant dans jsfiddle mais ne fonctionne pas dans le navigateur Comment exécuter la fonction d'aide après que DOM est prêt en météorite Javascript backtrace Trouver la moyenne d'un tableau en utilisant JS

Répéter dynamiquement les mosaïques en fonction du navigateur de différentes tailles ou de l'écran mobile

Quel que soit l'écran utilisé pour afficher la page, j'aimerais afficher autant de tuiles que possible. Différents scénarios incluent:

  • Navigateur mobile (iPhone, Android)
  • IPad ou Android Table ou Kindle Fire
  • Fenêtre Narrow Browser (safari, chrome, c'est à dire, firefox, operta, etc.)
  • Fenêtre du navigateur plein écran

Une solution à laquelle je pensais était d'utiliser 960.gs et adaptive.js … cependant, lorsque j'ai configuré la taille de la div, par exemple:

Div class = "tile grid_4"

J'ai remarqué que adaptive.js redimensionnerait la mosaïque (car les différents fichiers .cs redimensionnent les colonnes) … Cependant, je dois garder une taille de carreau fixe (310px X 450px) ….

Peut-être que je dois renommer dynamiquement la classe div, de sorte que le nombre de colonnes x col width = 310px?

Un site qui fait cela est http://pinterest.com

Et pour voir à quoi ressemble chaque carreau , consultez http://jsfiddle.net/hagope/76jjp/

Tuiles sur différents navigateurs de taille

Consultez les requêtes multimédias CSS3. Je vous recommande de lire l'article fantastique de A List Apart sur le design Web réactif , qui couvre le sujet et constitue un bon point de départ.

Après avoir trié les bases, vous pouvez cibler des périphériques spécifiques à l'aide de la requête de device-width . Pour cibler les affichages à haute densité (p. Ex., L'affichage de la rétine iPhone4), vous pouvez consulter la requête du device-pixel-ratio .

J'espère que cela t'aides.

À moins que je ne comprenne mal ce que vous voulez, cela devrait être faisable avec seulement CSS. Demandez à chaque tuile de style display: block (avec votre largeur et hauteur fixes), puis enveloppez chaque carreau dans un display: inline; float: left; display: inline; float: left; Élément conteneur. Ajoutez plus de CSS que vous voulez pour le style, et cela devrait fonctionner correctement.

Voici un exemple: http://gpittarelli.com/so_examples/inline_tiles.htm