Html 如何使whatsapp图标在小屏幕上可见？

我有一个nar栏，左侧是导航项目，右侧是whatsapp图标

<mat-toolbar class="nav">
   <a routerLink="app-aaa" mat-button>aaa</a>
   <a routerLink="app-bbb" mat-button>bbb</a>
   <a routerLink="app-ccc" mat-button>ccc</a>
   <a routerLink="app-ddd" mat-button>ddd</a>
   <a routerLink="app-eee" mat-button>eee</a>
   <a routerLink="app-fff" mat-button>fff</a>
   <a routerLink="app-ggg" mat-button>ggg</a>
   <a routerLink="app-hhh" mat-button>hhh</a>
   <span><a href="https://api.whatsapp.com//send?phone=1234567890">
       <svg viewBox="0 0 32 32" class="whatsapp-ico">
         <path
            d=" M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0 2.15-.515 2.478-1.318.13-.33.244-.73.244-1.088 0-.058 0-.144-.03-.215-.1-.172-2.434-1.39-2.678-1.39zm-2.908 7.593c-1.747 0-3.48-.53-4.942-1.49L7.793 24.41l1.132-3.337a8.955 8.955 0 0 1-1.72-5.272c0-4.955 4.04-8.995 8.997-8.995S25.2 10.845 25.2 15.8c0 4.958-4.04 8.998-8.998 8.998zm0-19.798c-5.96 0-10.8 4.842-10.8 10.8 0 1.964.53 3.898 1.546 5.574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z"
     fill-rule="evenodd">
     </path>
   </svg>
  </a></span>
</mat-toolbar>

---

它在桌面上运行良好。所有项目和图标都在同一行中。但如果我在小屏幕上测试，比如说iphone模式。图标不可见，右侧的一些导航项目被切断。如何使其具有响应性？

您应该使用@media使您的网站具有响应性

你可以在这里找到一些信息

我个人为每个不同的设备制作了一个css文件，比如

<link rel="stylesheet" media="screen and (min-device-width: 320px)"href="css/320style.css">
<link rel="stylesheet" media="screen and (min-device-width: 760px)"href="css/760style.css">
<link rel="stylesheet" media="screen and (min-device-width: 900px)"href="css/900style.css">
<link rel="stylesheet" media="screen and (min-device-width: 1200px)"href="css/1200style.css">

你可以用这个或者用不同的宽度

---

如果你从手机视图开始，然后再向上看（你可以删除前一个320样式，制作一个普通的css，这样即使它的宽度是-320px，它也适用于每个设备）

我自己找到了一个解决方案。在

nav

类中。我添加了类似的内容

@media only screen and (max-width: 600px) {
    flex-direction: column;
    height: auto;
}

---

我想为我的案例举一个具体的例子。

@media only screen and (max-width: 600px) {
    flex-direction: column;
    height: auto;
}