根据屏幕宽度更改按钮大小

Question

我已经实现了一个包含文本和图标的下拉列表。我想知道如何删除文本并在屏幕较小时保持图标（如max-width：768 px）。是否可以更改div的文本？或者我需要创建另一个并根据屏幕宽度显示/隐藏两者？

我的代码是：

<button onclick="myFunction()" class="dropbtn">My List <i class="fa fa-arrow-circle-down" aria-hidden="true"></i></button

我想删除文字并保留图标。

谢谢！

Answer 1

不需要创建另一个div，只需使用@media查询并使用css，你想要的屏幕大小是什么图标，以及你想要文本的shize。

用文章包装文字。

<button onclick="myFunction()" class="dropbtn"><span>My List</span> <i class="fa fa-arrow-circle-down" aria-hidden="true"></i></button>

然后css会像;

@media screen and (max-width: 768px) {
  button span{
    display: none
  }
  button{
    padding: 10px;
  }
}