我正在學習回應式媒體查詢，我想做兩件事：
- 洗掉箭頭圖示
- 調整子選單，我想我只需要減小字體大小？
下面是一個插圖：
請問這個圖示怎么去掉？
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;
}
}
這是這里的復制品。
感謝您的幫助和評論。
uj5u.com熱心網友回復：
@media (max-width: 400px) {
.fa-chevron-down{
display: none;
}
}
此代碼將洗掉您的圖示
但關于文本
不
請不要縮小字體大小，這是使網站回應的錯誤方法。在回應式網頁設計中，隨著設備尺寸的減小，您通常應該增加尺寸（絕對有一些例外，但通常是這樣）
因為設備尺寸已經足夠小了！
考慮自己嘗試將此頁面與寬度低于 400 像素的設備一起使用，在該站點上閱讀較小的文本是否更容易？還是更大的？點擊較小的按鈕更容易嗎？或更大的（有足夠的距離）
所以我建議你增加側邊欄的大小而不是減小字體大小
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/469193.html