如何使面包屑具有响应性？

Question

我对面包屑的反应性有疑问。我需要更改面包屑的大小，台式机和移动设备上的面包屑大小都相同，如何仅在移动设备上减小面包屑的大小...

我尝试过

@media all and(max-width:500px){
     .breadcrumb{
          font-size: 10px;
     }
     .breadcrumb li a{
          padding:10px 0 10px 30px;
     }
}

我的面包屑代码

function get_breadcrumb() {
    echo '<a href="'.home_url().'" rel="nofollow">Home</a>';
    if (is_category() || is_single()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
        the_category(' &bull; ');
            if (is_single()) {
                echo " &nbsp;&nbsp;&#187;&nbsp;&nbsp; ";
                the_title();
            }
    } elseif (is_page()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
        echo the_title();
    } elseif (is_search()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;Search Results for... ";
        echo '"<em>';
        echo the_search_query();
        echo '</em>"';
    }
}

Answer 1

尝试将此CSS添加到主题的自定义CSS：

@media (max-width: 860px) {
     .breadcrumb, .breadcrumbs li a, .breadcrumb a{
          font-size: 10px !important;
     }
     .breadcrumb li a{
          padding:0px;
     }
}