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

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>

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

Answer 1

使用media queries.

例如，您可以像这样隐藏菜单文本：

@media screen and (max-width: 1024px) {
    .menu_text {
        display: none !important;
    }
}

Answer 2

这可以使用媒体查询来完成。

CSS

#menu img {
  display: none;
  border: 1px solid #ccc;
}
/*For Ipad Portrait view and below that*/
@media (max-width: 768px) {
 #menu span {
   display: none;
 }
  #menu img {
  display: block;
} 
}

<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='menu_icon'/></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='others'/></a></li>
            
            </ul>

Answer 3

你可以使用 css @media queries.

大屏幕：

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

  }

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

Answer 4

浏览此 link 并下载。 Responsive Retina-Ready Menu

然后只需将此媒体添加到头部的index.html页面

<style>
        @media(min-width:504px)
        {
            .icon{
                display:none !important;
            }
        }
        </style>

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

Display text on large screen and icon on small screen

html

css

responsive-design