我正在使用以下方法为不同的屏幕尺寸设计我的网站。
<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,我需要我的网站通过此测试。
我想知道在这种情况下是否有更好的处理方法。什么是更好的解决方案
最佳答案
为什么要为移动设备/桌面设备使用两种不同的包装器,而不是使用 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) */
}
}
这是移动优先的变体。
关于html - 使用 Bootstrap 3 为不同屏幕尺寸设计网站样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23734396/