我有一个像
这样的菜单<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来实现它吗?
答案 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 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>