我的工作是,我的雇主想要一个使用 Bootstrap 3 的响应式网站,但他们不希望在他们现有的桌面网站上进行任何视觉上的更改(显然不理想,但我无法控制)。目前我正在处理页 footer 分。在宽度小于 768px 的屏幕上,所需的方法是在 Accordion 中放置链接(我使用的是 Bootstrap 3 Accordion ),但在宽度超过 768px 的屏幕上, Accordion 将被放弃,链接组内联排列。
https://codepen.io/v_for_vinsanity/pen/mWGRyw/
我遇到的问题是,在 <768px 的屏幕上,链接组标题只能是纯文本,但在 >768px 的屏幕上,标题需要包装在标签中以驱动 Accordion 功能。在某些屏幕尺寸上使用 CSS 隐藏/显示一个版本并在其他屏幕尺寸上使用 CSS 隐藏/显示一个版本,反之亦然吗?
例子:
<h4 class="panel-title">
<a role="button" class="hidden-md hidden-lg" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" data-href-mobile="#collapseOne" data-href-desktop="#">
<span class="fa fa-plus visible-xs-inline"></span> <strong>Michigan Health Plans</strong>
</a>
<span class="hidden-xs hidden-sm"><strong>Michigan Health Plans</strong></span>
</h4>
这会是 SEO/可访问性问题吗?
我试图找到一种使用 javascript/jQuery 添加/删除标签和内容的方法,但到目前为止我还没有找到好的解决方案。非常感谢对此问题的任何帮助!
最佳答案
我认为没有 SEO 问题,你只需要使用你正在使用的 bootstrap 版本的断点媒体查询。例如,我使用 Bootstrap 版本 3,所以我使用以下内容:
<style type="text/css">
/*==================================================
Bootstrap 3 Media Queries
==================================================*/
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
/* YOUR CODE HERE|EXAMPLE CODES*/
body{
background-color: red;
}
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
/* YOUR CODE HERE|EXAMPLE CODES*/
body{
background-color: black;
}
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
/* YOUR CODE HERE|EXAMPLE CODES*/
body{
background-color: blue;
}
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
/* YOUR CODE HERE|EXAMPLE CODES| SET HERE WHAT YOU NEED TO HIDE OR ANYTHING*/
body{
background-color: green;
}
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
/* YOUR CODE HERE*/
}
</style>
关于javascript - 根据屏幕大小隐藏 html 标签/内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43048724/