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

【问题标题】：Sass responsive grids. From 3 column layout (PC) to 2 column layout (Ipad)Sass 响应式网格。从 3 列布局 (PC) 到 2 列布局 (Ipad)
【发布时间】：2016-04-03 22:04:16
【问题描述】：

第一次使用 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); 
}

提前致谢

【问题讨论】：

你能再解释一下吗。你使用的是什么 mixin 或库？
除非你有 Sass->CSS 编译问题，只发布编译后的 CSS。

标签： css sass compass-sass

【解决方案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); 
        }
    }

如果您想利用 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

【讨论】：