最佳实践使用SCSS编写CSS，以实现网站响应

Question

当我想创建一个响应式网站时，假设有两个屏幕不同的设备。我应该为不同的文件创建什么@media screen｛｝，比如下面的代码：

@media screen and (min-width: 676px) {//Some code here}

或者直接为同一文件写入@media screen｛｝？。这个例子我的代码：

.home { 
   .container { 
      padding: 10px 0 20px 0; 
        @media screen and (max-width: 480px) {
          padding: 2px 0 10px 0 
        } 
   }
}

请附上一些例子作为我的参考资料。

谢谢。

Answer 1

您可以尝试以下方法之一：

1. 对将要添加的所有元素使用一个媒体查询scss文件的底部
2. 将每个媒体查询添加到它的元素中，就像您所做的那样。我不喜欢这种方法是因为它会使查找/编辑代码变得更加困难在从事大型项目时

示例1

.section--about {
  text-align: center;
  p {
    color: #727272;
  }
}
@include mobile {
  .section--about {
    p {
      font-size: 1.5em;
    }
  }
}

示例2

.section--about {
  text-align: center;
  p {
    color: #727272;
  }
  @include mobile {
    p {
      font-size: 1.5em;
    }
  }
}

进一步阅读：

• Sass中的媒体查询方法
• Sass指南
• 用Sass编写更好的媒体查询
• Sass的媒体查询混合