Grilles réactives Sass. De la disposition de 3 colonnes (PC) à la disposition de 2 colonnes (Ipad)

Question

Temps de poing en utilisant Sass. J'ai une disposition de 3 colonnes, aimerais changer ceci à la disposition de 2 colonnes quand l'utilisateur est sur Ipad.

Mise en page PC
[barre latérale gauche] [content] [barre latérale droite]

Mise en page Ipad
[barre latérale gauche] [content]
[barre latérale droite]

<div id="main-wrapper"> 
    <div id="sidebar-left"></div> 
    <main id="main-content"></div> 
    <aside id="sidebar-right"></aside> 
</div> 

#sidebar-right { 
    @include span(last 4 of 16); 
} 

#sidebar-left { 
    @include span(first 4 of 16); 
} 

Merci à l'avance

Answer 1

Utilisez les requêtes média pour obtenir cet effet. More about Media Queries Tout ce dont vous avez besoin est de connaître les points de rupture pour les domensions de l'iPad où les styles CSS devraient changer.

Par exemple, si peut être à 768px (de façon réaliste plus élevé, mais permet d'utiliser que par exemple)

<div id="main-wrapper"> 
     <div id="sidebar-left"></div> 
     <main id="main-content"></div> 
     <aside id="sidebar-right"></aside> 
    </div> 

// For devices with resolution up to 768 
    @media screen and (max-width: 768px) 
    { 
     #sidebar-right { 
      @include span(last 4 of 16); 
     } 
    } 
// For devices with resolution above 768 
    @media screen and (min-width: 769px) 
    { 
     #sidebar-left { 
      @include span(first 4 of 16); 
     } 
    } 

Si vous souhaitez profiter de l'utilisation Sass, vous pouvez également utiliser les requêtes des médias comme Mixins, faisant votre vie beaucoup plus facile, comme ceci:

// Scss syntax 
@mixin Query_small{ 
    @media screen and (max-width: 768px){ 
     @content 
    } 
} 

@mixin Query_large{ 
    @media screen and (min-width: 769px){ 
     @content 
    } 
} 

// Sass Syntax 
=Query_small 
    @media screen and (max-width: 768px) 
     @content 

=Query_large 
    @media screen and (min-width: 769px) 
     @content