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

Question

I am using the following method to style my website for different screen sizes.

<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 -->

I then define different styles that I need for #sidebar and #sidebar_mobile in my CSS. This leads to two problems:

• Repetition (there are many shared properties between #sidebar and #sidebar_mobile).
• Duplicate IDs - The divs that are automatically inserted by Typo3 (Raw HTML content inserted via Typo3 backend) end up having the same ID (inside #sidebar and #sidebar_mobile). This fails WCAG 2.0 AA and I need my website to pass this.

I would like to know if there is a better way of going about things in this case. What would be a better solution

Answer 1

Why are you using two different wrappers for mobile/desktop instead using CSS to style them individually:

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

This is the mobile first variant.