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

这是移动优先版。

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

1 个答案: