如何更改指南针断点？使用响应式 mixin 时

Question

我正在使用 compass 和 sass (scss) 创建 CSS 文件。我相信平板电脑断点太宽了。我的移动优先网站的第一个断点开始于 700px 左右。

如何将tablet断点改为360px？ （什）

// breakpoint is around 700px
@include respond-to(tablet) {
    margin: 0;
}

Answer 1

你的 mixin 应该是这样的：

@mixin respond-to($media) {
    @if $media == smartphone {
        @media screen and (min-device-width: $break-smartphone) { @content; }
    }
    @if $media == smartphone-only {
        @media screen and (min-width: $break-smartphone) and (max-width: $break-tablet) { @content; }
    }
    @if $media == tablet {
        @media screen and (min-width: $break-tablet) { @content; }
    }
    @if $media == tablet-only {
        @media screen and (min-width: $break-tablet) and (max-width: $break-widescreen) { @content; }
    }
    @if $media == mobile-only {
        @media screen and (max-width: $break-widescreen) { @content; }
    }
    @if $media == widescreen {
        @media screen and (min-width: $break-widescreen - $webkit-scrollbar-width) and (min-device-width: $force-tablet ) { @content;}
    }
}

$media 是其他 Sass var 的 var/占位符，如果是这个 mixin，$break-tablet 是您要更改的 var。

所以放了

$break-tablet: 360px;

在 SCSS 文件的某个地方，您将 mixin 包含到（不需要高于包含），您会没事的。

另一个问题是，为什么要包含 360 像素的断点？没有使用 360px 宽度的普通平板电脑。最重要的是(older) smartphones。但是您会排除 360 像素的 iPhone。