DéveloppementsBac à sable

Rendre la largeur du blog flexible en fonction des dimensions de la fenêtre [Responsive Web Design]


Les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes !
Référez-vous à la nouvelle théorie du langage XML ou/et posez vos questions sur le forum pour en savoir plus.
Description Gadget Version Template Version
Utilisation de media screen dans les modèles standards b:v2.
1
2
C'est un phénomène à la mode que font face les webmasters depuis l'émergence des portables et de tous ces nouveaux types d'appareils dotés d'écrans avec des résolutions plus que variés.

Le réseau social Google+, le nouveau site d'Eurosport France, le site de Discovery Channel France, et même votre blog favori Blogger Code ont plié leur support visuel en 4 pour répondre aux contraintes des différentes résolutions.

Mais comment afficher un blog pachydermique sur un tout petit confetti ?
Avec les modèles standards b:v2 de Blogger, il est possible d'effectuer quelques aménagements en débloquant la largeur fixe maximale lorsque la largeur de la fenêtre devient inférieure à celle du blog. On va même en profiter pour balancer les colonnes des gadgets au pied du blog lorsque la fenêtre deviendra trop étroite.
Pour réaliser cela, on va employer simplement la spécification CSS media screen.

Dans le code HTML de votre modèle, déployez la balise b:template-skin :

<b:template-skin></b:template-skin>

Recherchez l'emplacement :

      ]]>
    </b:template-skin>

Juste avant, vous y ajoutez ce CSS :

      @media screen and (max-width: $(content.width)) {
        body {
          min-width: inherit;
          padding: 0px;
        }
        .content-outer, .content-fauxcolumn-outer, .region-inner {
          min-width: inherit;
          max-width: inherit;
          _width: inherit;
        }
      }
      @media screen and (max-width: 550px) {
        body {
          min-width: 550px;
        }
        .content-outer, .content-fauxcolumn-outer, .region-inner {
          min-width: 550px;
          max-width: 550px;
          _width: 550px;
        }
      }
      @media screen and (max-width: 800px) {
        .main-inner .columns {
          padding-left: 0;
          padding-right: 0;
        }
        .main-inner .fauxcolumn-center-outer {
          left: 0;
          right: 0;
          _width: expression(this.parentNode.offsetWidth -
            parseInt("0") -
            parseInt("0") + 'px');
        }
        .main-inner .fauxcolumn-left-outer {
          width: 100%;
        }
        .main-inner .fauxcolumn-right-outer {
          width: 100%;
        }
        .main-inner .column-left-outer {
          width: 100%;
          right: 0;
          margin: 2em 0 2em 0;
        }
        .main-inner .column-right-outer {
          width: 100%;
          margin: 2em 0 2em 0;
        }
      }

Les valeurs en rouge correspondent à la largeur minimum que votre modèle peut supporter (il faut quand même fixer une limite raisonnable :D ).
La valeur en vert détermine à partir de quelle largeur les colonnes latérales sont repositionnées en-dessous de la colonne centrale (comme pour la version mobile).
Modifiez toutes ces valeurs en fonction de votre contenu.

Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte Platine TC (Ambassador & Advanced Troubleshooter):
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

DéveloppementsFichiers XML
Populaire
ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire
DéveloppementsFichiers XML
Résumés des articles avec images réactives [Pack 2016]
Populaire