javascript - 根据屏幕大小隐藏 html 标签/内容

Question

我的工作是，我的雇主想要一个使用 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 添加/删除标签和内容的方法，但到目前为止我还没有找到好的解决方案。非常感谢对此问题的任何帮助!

Answer 1

我认为没有 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>