Question

我正在从事一项工作，我的雇主想要一个使用Bootstrap 3的响应式网站，但他们不希望在现有桌面网站上进行任何视觉上的改变（显然不理想，但不受我的控制）。目前，我正在处理页脚部分。在宽度小于768px的屏幕上，所需的方法是在手风琴中使用链接（我使用Bootstrap 3手风琴），但在宽度大于768px的屏幕上，手风琴被放弃，链接组内联排列。

https://codepen.io/v_for_vinsanity/pen/mWGRyw/

我遇到的问题是，在屏幕＆lt; 768px上，链接组标题应该只是纯文本，但在屏幕上＆gt; 768px标题需要包含在标记中以驱动手风琴功能。是否可以使用重复的标题并使用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>

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

1 个答案: