断点和最​​大宽度有什么区别，它们的最佳用例是什么？

Question

 .about-wrapper {
       width: 100%;
       @media screen and(max-width: $large) {
         width: 600px;
         height: 338px;
         margin-left: -300px;
         margin-top: -190px;
    }
  }

VS

  .about-wrapper{
      width: 100%;
      @include breakpoint($large) {
         width: 600px;
         height: 338px;
         margin-left: -300px;
         margin-top: -190px;
    }
  }

有没有正确的方法来使用max-width？ 一个人的表现比另一个好吗？我想了解两者的利弊。

Answer 1

他们只是SASS vs CSS写东西的方式。 @include断点编译为css3 @media。在你的情况下：

$large = 100px;

@include breakpoint($large) {
    ...
}

编译为：

@media (min-width: 100px) {
    ...
}

如果您想在max-width上设置断点，请执行以下操作：

$large = max-width 100px;

@include breakpoint($large) {
    ...
}

将编译为：

@media (max-width: 100px) {
    ...
}

Answer 2

Breakpoint是来自某个SASS库的mixin。我打赌你正在使用Breakpoint Sass。这个mixin编译成@media语句，所以不是一个比另一个更好但管理媒体查询的方式不同。