Change button size according to Screen width

问题

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?

My code is:

<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.

Thank you!

回答1:

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>

and then css will be like;

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

来源：https://stackoverflow.com/questions/36998732/change-button-size-according-to-screen-width