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

Question

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

如何将平板电脑断点更改为 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 vars 的 var/placeholder，如果这个 mixin$break-tablet是你想要更改的 var。

所以只要放

$break-tablet: 360px;

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

另一个问题是，为什么要包含 360px 的断点？没有使用 360px 宽度的普通平板电脑。它是最重要的（旧）智能手机。但是你会排除 360 像素的 iPhone。