使用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) */
    }
}

这是移动的第一个变种.