根据屏幕宽度更改按钮大小 [英] Change button size according to Screen width

问题描述

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

I have implemented a drop down list which contains text and an icon. I want to know how can I remove the text and keep the icon when the screen with is smaller (like max-width: 768 px). Is it possible to change the text of the div? Or I need to create another one and just show/hide both according to the screen width?

我的代码是:

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

我想删除文本并保留图标.

I want to remove the text and keep the icon.

谢谢！

推荐答案

无需创建另一个 div，只需使用 @media 查询并在您想要图标的屏幕大小和您想要文本的大小上使用 css.

No need to create another div, just use @media query and use css at which size of screen you want icon and and on which shize you want text.

只需用标签包裹文本即可.

Just wrap your text with tag.

<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;
  }
}

这篇关于根据屏幕宽度更改按钮大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！