使用响应式web设计和javascript设计面包屑

我希望在我的页面中有一个面包屑，我希望视图能够通过窗口大小调整、分辨率更改和独立于设备/目标的代码进行适当缩放

我开始知道响应性网页设计是我必须做的。我已经阅读了一些文档和教程，并且理解使用媒体查询我们可以实现它。因此，在我的媒体查询中，我使用最小宽度、最大宽度来更改css

我想要实现的是更多。我有一个面包屑，看起来像下面

链接1/链接2/链接3等等

每当视口/屏幕宽度小于320px时，我希望它成为一个下拉列表

现在我有一个解决办法。创建默认的面包屑并创建一个包含所有链接并隐藏它的下拉列表。当宽度小于320px时，我将隐藏默认面包屑并显示下拉列表。但这是一个奇怪的解决方案，我在这个时候

相反，我需要一些javascript方法来处理默认的面包屑，并从中获取所有链接，然后创建一个下拉列表并向其中添加所有链接。然后隐藏默认的面包屑。为此，我必须添加一个调整大小处理程序并触发一个事件，然后我的javascript将侦听该事件并对面包屑执行操作

还有其他办法吗。我不想使用jquery或任何其他库，因为在我们的项目中禁止使用其他库。我们使用专有图书馆

---

非常感谢您的帮助。谢谢大家。

更新：很抱歉，我没有看到您不想使用jQuery

我相信您可以使用JavaScript将breadcrumbs中的链接转换为select元素，而无需依赖任何库

代码：

var nav=document.getElementById（'nav'），
links=nav.getElementsByTagName（'a'），
select=document.createElement（'select'），
option=document.createElement（'option'）；
对于（变量i=0；i

在将容器中的链接转换为select元素之前，我已经编写了这个jQuery插件

(function ($) {
    $.fn.convertToList = function () {
       var that = this;
       this.before(
            $('<select class="breadcrumbs-list"></select>').
            change(function () {
                window.location = $(this).val();
            }
         ))
        this.find('a').each(function () {
            that.prev('select').append('<option value="' + $(this).attr('href') + '">' + $(this).html() + '</option>')
        });
    };
})(jQuery);

（函数（$）{
$.fn.convertToList=函数（）{
var=这个；
这个，以前(
$('').
改变（功能）{
window.location=$（this.val（）；
}
))
this.find（'a'）。每个（函数（）{
that.prev（'select'）.append（'+$（this.html（）+''）
});
};
})（jQuery）；

以后可以像

$（'.breadcrumbs'）.convertToList（）那样使用它

现在使用CSS媒体查询来隐藏/显示
.breadcrumbs
或
.breadcrumbs list
答案更新没有使用jQueryYeah我不想使用jquery，但这是个好主意。我不需要写选择框。加载页面后，javascript方法将创建一个selectbox，并用值填充它并将其隐藏。然后，我使用媒体查询来隐藏和显示其中一个。
(function ($) {
    $.fn.convertToList = function () {
       var that = this;
       this.before(
            $('<select class="breadcrumbs-list"></select>').
            change(function () {
                window.location = $(this).val();
            }
         ))
        this.find('a').each(function () {
            that.prev('select').append('<option value="' + $(this).attr('href') + '">' + $(this).html() + '</option>')
        });
    };
})(jQuery);