css - 我在哪里可以找到 Stencil on Bigcommerce 中的响应式 CSS？

Question

我正在尝试编辑标题的 css，但找不到响应式 css 的来源。我查看了大部分 scss 文件夹，但找不到它。

我在 Bigcommerce 上使用 Stencil 上的 Cornerstone 主题。

如果我遗漏了任何其他信息，请告诉我。

谢谢。

Answer 1

谢谢你帮助我 Alyss，尽管你的回答很含糊。

Stencil 框架使用@include breakpoint(...) 而不是@media screen...

要更改响应尺寸的尺寸，您需要编辑 2 个文件。从初始的 stencil 文件夹，导航到 /assets/js/theme/common/media-query-list.js 第一个文件和 /assets/scss/settings/global/screensizes/_screensizes.scss 第二个文件。

这是 js 文件的片段。只需编辑 large、medium 和 small 的值:

const breakpointSizes = {
    large: 1261,
    medium: 801,
    small: 551,
};

这是 scss 文件的片段。使用您用于 js 文件的相同值编辑 $screen-large、$screen-medium 和 $screen-small 的值:

$screen-large:                  1261px;
$screen-medium:                 801px;
$screen-small:                  551px;

下面是 header.scss 文件的一个片段。 '@include breakpoint("medium")' 是中型窗口的响应式样式，我们从前两个文件中知道它是 801。

.header {
    background-color: $header-bg;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: zIndex("low");

    @include breakpoint("medium") {
        overflow: visible;
        position: relative;
    }

    &.is-open {
        height: 100%;

        @include breakpoint("medium") {
            height: auto;
        }
    }
    &:after {
        clear: both;
        content: '';
        display: block;
    }
}