大屏显示文字，小屏显示图标答案

【问题标题】：Display text on large screen and icon on small screen大屏显示文字，小屏显示图标
【发布时间】：2015-01-20 19:48:36
【问题描述】：

我有一个类似的菜单

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

【问题讨论】：

标签： html css responsive-design

【解决方案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; }

  }

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

【讨论】：

【解决方案2】：

使用media queries。

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

通过此链接并下载它。 Responsive Retina-Ready Menu

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

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

【讨论】：