html - 使用 Bootstrap 3 为不同屏幕尺寸设计网站样式

Question

我正在使用以下方法为不同的屏幕尺寸设计我的网站。

<div id="sidebar" class="col-md-3 hidden-xs hidden-sm">
    <!-- Inner Classes and Stuff -->
    <!-- IMPORTANT: Div auto-inserted by Typo3 -->
</div>  <!-- sidebar -->

<div id="sidebar_mobile" class="col-xs-12 hidden-md hidden-lg">
    <!-- Inner Classes and Stuff -->
    <!-- IMPORTANT: Div auto-inserted by Typo3 -->
</div>  <!-- sidebar -->

然后，我在 CSS 中为#sidebar 和#sidebar_mobile 定义了我需要的不同样式。这会导致两个问题:

• 重复(#sidebar 和#sidebar_mobile 之间有许多共享属性)。
• 重复 ID - Typo3 自动插入的 div(通过 Typo3 后端插入的原始 HTML 内容)最终具有相同的 ID(在#sidebar 和#sidebar_mobile 中)。这未通过 WCAG 2.0 AA，我需要我的网站通过此测试。

我想知道在这种情况下是否有更好的处理方法。什么是更好的解决方案

Answer 1

为什么要为移动设备/桌面设备使用两种不同的包装器，而不是使用 CSS 分别设置它们的样式:

<div id="sidebar" class="col-sm-12 col-md-3">
    <!-- Inner Classes and Stuff -->
    <!-- IMPORTANT: Div auto-inserted by Typo3 -->
</div>

#sidebar {
    /* Mobile/Tablet styles (xs, sm) */
}
@media (min-width: 991px) {
    #sidebar {
        /* Tablet/Desktop styles (md, lg) */
    }
}

这是移动优先的变体。