Pouvons-nous utiliser des panneaux pour une conception Web réactive?


8

Je voudrais créer un nouveau site en utilisant un design réactif en utilisant le thème Omega. Les modules de panneaux conviennent-ils à une conception réactive ou dois-je utiliser autre chose (comme le module Contexte)? Merci

Réponses:



5

Oui! Je viens de le faire.

En supposant 2 couleurs et variantes - vous pourriez avoir besoin de plus pour d'autres dispositions:

  1. Dans la résolution @media CSS la plus basse, je viens de définir les '.panels-col-first' et '.panels-col-last' sur { width: 99.9%; clear: both }.
  2. Dans les mises en page à plus haute résolution, lorsque vous souhaitez qu'il revienne à la mise en page 2 couleurs, annulez simplement la priorité { width: 49.9%; clear: none }

Remarques:

  • les% largeurs doivent s'additionner à MOINS de 100% si vous voulez prendre en charge IE 6 et 7 car ils ont des erreurs d'arrondi. Vous pouvez toujours le faire dans votre ie.css spécial si vous en avez un et que vous avez vraiment besoin de 0,2%!
  • Ces classes devraient déjà être définies pour flotter à gauche du CSS principal des panneaux, mais vous pouvez également remplacer cela si nécessaire.

1

J'ai eu le même problème. Pas besoin de coder en CSS pour résoudre le problème. -> Oméga bien gérer les panneaux dans un design réactif.

"Omega est livré avec une poignée de dispositions de panneaux par défaut. Si vous activez les panneaux sur votre site avec le thème Omega également activé, et que vous allez ajouter un nouveau panneau, vous verrez Omega: 12, (ou 16 ou 24) Grille de colonnes répertoriée . Choisissez l'une d'entre elles, puis choisissez une mise en page. Je suis gêné de voir à quel point c'était facile, et je n'ai même jamais su! "

J'ai trouvé la solution sur cette page, deuxième commentaire http://www.kendallsdesign.com/blog/omega-theme-responsive-design-resources

Au fait, il y a vraiment de bons matériaux.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.