Question

我使用指南针和sass（scss）来创建CSS文件。我相信平板电脑的断点太宽了。我的移动优先网站的第一个断点开始大约700px。

如何将平板电脑断点更改为360px？（ISH）

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

所以只需加上

$break-tablet: 360px;

在SCSS文件中的某个地方，你将mixin包括在内（不需要高于包含），你就可以了。

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

如何更改罗盘断点？当使用response-to mixin时

1 个答案: