要创建响应式面包屑导航，可以使用CSS中的媒体查询和flexbox布局。
首先，在HTML中创建面包屑导航的基本结构，如下所示：
<nav class="breadcrumb">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Subcategory</a></li>
<li>Current Page</li>
</ul>
</nav>然后，在CSS中使用flexbox布局来水平排列面包屑导航中的每个元素，并添加一些间距，如下所示：
.breadcrumb {
display: flex;
flex-wrap: wrap;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
.breadcrumb li {
margin-right: 10px;
}
.breadcrumb li:last-child {
margin-right: 0;
}接下来，使用媒体查询来在小屏幕设备上使面包屑导航垂直排列。例如，在屏幕宽度小于600像素时，可以使用以下CSS代码：
@media screen and (max-width: 600px) {
.breadcrumb {
flex-direction: column;
}
.breadcrumb li {
margin-right: 0;
margin-bottom: 5px;
}
.breadcrumb li:last-child {
margin-bottom: 0;
}
}这样，在小屏幕设备上，面包屑导航就会垂直排列，并且各个元素之间会有一些垂直间距。
关键词高亮：