一个类名搞定导航栏图标实现在web端显示 在移动端隐藏

使用layui中的layui-hide-xs类名可以实现此效果

 <ul class="layui-nav layui-layout-right">
        <!--		最新消息logo部分start-->
        <li class="layui-nav-item  layui-hide-xs" lay-unselect>  <!--layui-hide-xs  可以实现在移动端隐藏按钮效果-->
            <div class="notice-box">
                <a><i class="layui-icon layui-icon-notice"></i></a>
                <span class="red-message">16</span>
            </div>

        </li>
        <!--		最新消息logo部分部分end-->
        <li class="layui-nav-item layui-hide-xs" lay-unselect> <!--layui-hide-xs 可以实现在移动端隐藏按钮效果-->
            <a ew-event="fullScreen"><i class="layui-icon layui-icon-screen-full"></i></a>
        </li>
        <li class="layui-nav-item" lay-unselect>
            <a>
                <img src="${avatar!}" class="layui-nav-img">
                <cite>${name!}</cite>
            </a>
            <dl class="layui-nav-child">
                <dd lay-unselect>
                    <a ew-href="${ctxPath}/system/user_info">User Center</a>
                </dd>
                <dd lay-unselect>
                    <a id="setPsw">Password Modification</a>
                </dd>
                <hr>
                <dd lay-unselect>
                    <a id="btnLogout">Login Out</a>
                </dd>
            </dl>
        </li>
        <li class="layui-nav-item" lay-unselect>
            <a><i class="layui-icon layui-icon-more-vertical"></i></a>
        </li>
      </ul>

使用此类名可以实现效果如图
web端显示

移动端显示