0

我想知道您是如何在 SASS 中处理结合 SCSS 的响应式设计的。主要问题是关于媒体查询。

1）您是否使用断点混合直接在样式元素内编写媒体查询，如下所示：

.element{

     width:40%;

     @media screen (min-width:700px){
           width:100%;
     }

     @media screen (min-width:1000px){
           width:50%;
     } 

}

// CSS

@media screen (min-width:700px){
    .element{
        width:100%; 
    }
 }

 @media screen (min-width:700px){
    .element2{
        width:50%; 
    }
 }

2）或者你把它们写到特殊的单独的部分文件中？比如这样：

/* _responsive_wide_screen.scss */

@media screen (min-width:1000px){

    .element{
        width:50%;
        display:inline-block;
    }   

   .element2{
        width:20%;
    }

 }

更快的可能是第 1 个示例，但问题是为每个元素生成媒体查询语句，并且 CSS 文件大小越来越大。我应该避免这种方法吗？

我使用的是示例 2，但有时在文件之间切换不是那么用户友好。谢谢

4

1 回答 1

2

我自己的偏好是使用您展示的第一种方法。我喜欢它在将媒体查询本地化到特定元素方面提供的好处；我发现它加快了响应式工作流程，并鼓励在设计/布局需要的地方进行调整，而不仅仅是在特定的断点处。

对于值得花费额外时间的大型项目，然后我会检查并合并具有相同min-width和max-width值的媒体查询。必须进行这种二次优化肯定是这种方法的一个缺点——我希望即将发布的 Sass 能够为我们自动执行此功能。

于 2013-08-26T20:15:49.900 回答