html - 在大屏幕上显示文本，在小屏幕上显示图标

Question

我有一个像这样的菜单

<ul id='menu'>
            <li id='home' ><a href='index.php'><span class='menu_text'>Home</span><img class='menu_icon' src='_images/icons.svg#svg_home' alt=''/></a></li>
            <li id='other'><a href='other.php'><span class='menu_text'>others</span><img class='menu_icon' src='_images/icons.svg#others' alt=''/></a></li>
            ...
            </ul>

现在我想在屏幕尺寸较大时显示类 menu_text 的文本，即在笔记本电脑上，menu_icon 应保持隐藏状态，当屏幕尺寸较小时则相反，即在平板电脑或移动设备如何使用 css 实现它？

Answer 1

您可以使用 css @media 查询。

大屏幕:

  @media only screen and (min-width:1024px){

    .menu_text { display: block; }
    .menu_icon { display: none; }

  }

屏幕变小

  @media only screen and (max-width:480px){

    .menu_text { display: none; }
    .menu_icon { display: block; }

  }

您可以将最大和最小宽度值更改为适合您需要的值