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

我试图编辑标题的CSS，但我找不到响应的CSS来自哪里。我查看了大部分的scss文件夹，但找不到它。我在哪里可以在Bigcommerce上的Stencil中找到响应式css？

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

让我知道我是否留下任何其他信息。

谢谢。

2016-11-12 Jonathan

大商业主题通常倾向于有一个单独的responsive.css文件。你找到了吗？我已经添加了这个作为评论，因为它不是一条硬性规则，我已经看到了模板，只是在所有地方都以特别的方式添加了@media css。（我不熟悉那个特别的主题）。 – PaulD

嘿PaulD，你是这样的蓝图框架，但不是模板框架。新框架使用.scss文件而不是.css – Jonathan

您在/assets/scss/layouts/header/_header.scss中检入了吗？ – Alyss

谢谢你协助我Alyss，虽然你的回答非常含糊。

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

要更改响应大小的尺寸，你需要编辑两个文件。从最初的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文件的代码片段。编辑值$screen-large, $screen-medium, and $screen-small与你使用的js文件相同的价值观：

$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; 
    } 
}

来源

2016-12-08 16:02:50 Jonathan

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

回答

相关问题