我如何改变指南针的断点？当使用响应-to混合时

Question

我正在使用罗盘和sass (scss)来创建CSS文件。我认为平板电脑的断点太宽了。我的移动第一网站的第一个断点开始在700 my左右。

如何将平板断点更改为360 do？(ish)

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

Answer 1

你的混音应该是这样的：

@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/占位符，如果这个混合$break-tablet是您想要更改的变量。

所以就把

$break-tablet: 360px;

在SCSS文件中的某个位置，您将包含混合器到(不需要超出包含范围)，您会没事的。

另一个问题是，为什么要包含360 of的断点？没有使用360‘s宽度的普通平板。最重要的是(旧版)智能手机。但你会把360便士的iPhones排除在外。