如何根据正文类和媒体查询选择内容布局？

Question

所以这就是问题所在。我对 Susy 有点陌生，所以我不完全确定完成此任务的最佳方法，但我希望根据 body 类和已在下面设置的媒体查询将布局应用于 .hfeed div .

原因如下。我正在为 WordPress 执行此操作，并且使用应用于正文的 CSS 类来设置不同的布局。具体来说，这两个类是 .full-width-content 和 .content-sidebar。我需要选择器跨越整个容器或分别位于当前定义的区域中。因此，我想要设置样式的特定选择器将是“.full-width-content .hfeed”和“.content-sidebar .hfeed”。我尝试将它们设置为包含不同的容器，但这不起作用。

我是否应该简单地将这部分从定义的网格中分离出来并按类选择 THEN 进行媒体查询？

在 susy 中完成此任务的最佳方法是什么？

//susy grid definitions, footer sits outside the susy grid def

#wrap {
    @include container( $total-columns, $break-tablet, $break-desktop );

    @include at-breakpoint( $break-tablet ) {
        #header     { @include span-columns( $break-tablet omega ); }
        #title-area { @include span-columns( 5, $break-tablet ); }
        #header .widget-area { @include span-columns( 4 omega, $break-tablet ); }
        #nav        { @include span-columns( $break-tablet omega ); }
        .hfeed      { @include span-columns( 6, $break-tablet ); }
        #sidebar    { @include span-columns( 3 omega, $break-tablet ); }
    }

    @include at-breakpoint( $break-desktop ) {
        #header     { @include span-columns( $break-desktop omega ); }
        #title-area { @include span-columns( 5, $break-desktop ); }
        #header .widget-area { @include span-columns( 5 omega, $break-desktop ); }
        #nav        { @include span-columns( $break-desktop omega ); }
        .hfeed      { @include span-columns( 7, $break-desktop ); }
        #sidebar    { @include span-columns( 4 omega, $break-desktop ); }
    }
}

Answer 1

对我来说，这是一个 CSS 特殊性的顺序问题。我从 WordPress 的悲惨经历中知道，如果您从 21-11 之类的东西制作儿童主题，您将为此付出很多努力。因此，如果您尝试进行更改但不起作用 - 请确保检查您的元素并查看您的规则是否被其他样式应用或覆盖。我相信您已经发现我们的 WordPress 主题存在很多这样的问题。

取决于您如何设置 CSS 结构：

• 移动优先 - 最小屏幕到最大屏幕 • 从大屏幕到小屏幕

您的代码可能如下所示：

css 顶部的大屏幕或小屏幕的默认样式 - 首先进行处理 > 然后 > 媒体查询以在屏幕尺寸更改时覆盖这些指令 > 发生这种情况时会更改的任何内容都在这里。

/* 默认样式 */ 身体{...}

/* 智能手机样式 */

@媒体查询 {

body.class .container { ... }

}

我不确定这是否对您有帮助，我只是想帮助您指明方向。我很想看看其他人对此有什么看法。

在使用 WordPress 主题和 SASS 时要记住的一点是，确保您了解 CSS 特定性的成本 - 您越具体，生成页面的时间就越长。使用 SASS 很容易变得过于具体。

祝我的朋友好运。抱歉，如果这没有帮助。