子菜单的响应式媒体查询

Question

我正在学习响应式媒体查询，我想做两件事：

删除箭头图标
调整子菜单，我想我只需要减小字体大小？

这是下图：

请问如何删除这个图标？

HTML

<ul class="nav-links">
  <li *ngFor="let menu of menus; let i = index" [class.active]="menu.active">
    <ng-container>
      <a class="item" (click)="selectMenu(menu)">
        <i [class]="menu.iconClass"></i>
        <span class="links_name">{{ menu.name }}</span>
        <i class="fa fa-chevron-down"></i>
      </a>
      <ul
        class="submenu"
        #submenu
        [ngStyle]="{ 'height': menu.active ? submenu.scrollHeight + 'px' : 0 + 'px' } "
      >
        <li *ngFor="let submenu of menu.submenu">
          <a routerLink="{{ submenu.url }} "
            ><span class="links_subname">{{ submenu.name }}</span>
          </a>
        </li>
      </ul>
    </ng-container>
  </li>
</ul>

CSS

/* Responsive Media Query */

@media (max-width: 400px) {
    .sidebar {
        width: 0;
    }
    .sidebar.active {
        width: 60px;
    }
    .home-section {
        width: 100%;
        left: 0;
    }
    .sidebar.active~.home-section {
        left: 60px;
        width: calc(100% - 60px);
    }
    .home-section nav {
        width: 100%;
        left: 0;
    }
    .sidebar .logo-details .logo_name img {
        height: 30px;
        width: 65px;
        margin: 0 auto;
    }
    .sidebar.active~.home-section nav {
        left: 60px;
        width: calc(100% - 60px);
    }
    .sidebar .nav-links .submenu .links_subname {
        color: #fff;
        font-size: 14px;
        margin: 0 auto;
    }
}

这里是复制品here。

感谢您的帮助和评论。

Answer 1

@media (max-width: 400px) {
    .fa-chevron-down{
        display: none;
    }
}

此代码将删除您的图标

但是关于文字

没有

请不要将 font-size 变小，这是使网站响应的错误方法。在响应式网页设计中，随着设备尺寸的减小，您通常应该增加尺寸（绝对有一些例外，但通常是这样）

因为设备尺寸已经够小了！

考虑一下您尝试在宽度低于 400 像素的设备上使用此页面，在该站点上阅读较小的文本是否更容易？还是更大的？在较小的按钮上点击更容易吗？或更大的（有足够的距离）

所以我建议您增加 side-bar 的大小而不是减少 font-size

子菜单的响应式媒体查询

Responsive Media Query for a Submenu

css

media-queries