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

时间:2015-01-20 11:15:50

标签: html css css3 responsive-design

我有一个像

这样的菜单
<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来实现它吗?

4 个答案:

答案 0 :(得分: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; }

  }

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

答案 1 :(得分:0)

使用media queries

例如,您可以隐藏菜单文本,如下所示:

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

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

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

然后将此媒体添加到头部

中的index.html页面
<style>
        @media(min-width:504px)
        {
            .icon{
                display:none !important;
            }
        }
        </style>