Sass 响应式网格。从 3 列布局 (PC) 到 2 列布局 (Ipad)

Question

第一次使用 Sass。我有一个 3 列布局，想在用户处于 Ipad.

时将其更改为 2 列布局

布局电脑
[左侧栏][内容][右侧栏]

布局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 您所需要的只是知道 iPad 维度的断点，CSS 样式应该在其中更改。

例如，如果可以为 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); 
        }
    }

如果你想利用 Sass，你也可以使用媒体查询作为 Mixins，让你的生活更轻松，像这样：

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

Sass 响应式网格。从 3 列布局 (PC) 到 2 列布局 (Ipad)

Sass responsive grids. From 3 column layout (PC) to 2 column layout (Ipad)

css

sass

compass-sass