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

使用media queries。

例如，您可以隐藏菜单文本，如下所示：

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

Answer 3

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

<强> 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 4

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

然后将此媒体添加到头部

中的index.html页面

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

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

4 个答案: