php - 仅在移动布局上添加文本

Question

这是我网站的mobile version 我想添加小文本“MENU”here

当我尝试在此处添加时，它在桌面版中也可见。

<div id="responsive-menu-container">
            <span class="menu">MENU</span>
            </div>

如何仅在移动版本中添加此文本？ 或者可能不是代码，而是我尝试添加的方式不正确？

Answer 1

您可以使用带有 css 的 @media 标签来隐藏或显示它。像这样:

你的普通 css 类:

.menu{
   display:none;
}

您的移动版本类:

@media only screen and (max-width: 767px) {
    .menu{
       display:block;
    }
}

之后，通过使用您的示例，您必须将“菜单”跨度放入“响应式菜单容器”中。添加后可以调整位置。

<div id="responsive-menu-container">
   <span class="menu">MENU</span> 
</div>

编辑 position:absolute :

如果您正在为菜单栏使用引用库并自动创建此内容，您还可以为 .menu 类使用 position:absolute。像这样:

@media only screen and (max-width: 767px)
.menu {
    display:block;
    position: absolute;
    z-index: 9999999; /* I gave this value because your menu bar's z-index must be smaller than this. */
    margin-top: 15px;
    margin-left: 15px;
}