Question

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

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

如果我留下任何其他信息，请告诉我。

谢谢。

Answer 1

感谢您协助我Alyss，尽管您的回答非常模糊。

模板框架使用@include breakpoint(...)代替@media screen...

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

这是js文件的片段。只需编辑large, medium, and small：

的值即可

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

这是scss文件的片段。使用与js文件相同的值编辑$screen-large, $screen-medium, and $screen-small的值：

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

下面是header.scss文件的片段。 '@include断点（“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;
    }
}

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

1 个答案: