応答性の高いグリッド。 3列レイアウト（PC）から2列レイアウト（Ipad）

Question

拳銃を使用して握る時間。私は3列のレイアウトを持っていますが、ユーザーがIpad上にあるときにこれを2列のレイアウトに変更したいと思います。

レイアウトPC
[左のサイドバー] [コンテンツ] [右サイドバー]

レイアウトのIpad
[左のサイドバー]、[コンテンツ]
[右サイドバー]事前に

<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); 
} 

感謝

Answer 1

メディアクエリーを使用してこの効果を実現します。 More about Media Queries あなたが必要とするのは、CSSスタイルが変更されるiPadドームのブレークポイントを知ることだけです。例えば

768pxにすることができた場合（現実的に高いが、例えばそれを使用することができます）

<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); 
     } 
    } 

あなたはサスを使用しての利点を活用したい場合は、あなたも作り、ミックスインとしてメディアクエリを使用することができますあなたの人生はもっと簡単です：

// 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