仅在移动布局上添加文本 - Add text on mobile layout only

Add text on mobile layout only

本文关键字：添加文本布局移动 | 更新日期: 2023-09-26

这是我网站的手机版我想在这里添加小文本"MENU"

当我尝试在这里添加时，它在桌面版本中也可见。

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

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

您可以使用css隐藏或显示@media标记。这样的:

你的普通css类:

.menu{
   display:none;
}

你的移动版本类:

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

之后，通过使用你的例子，你必须把"menu" span在你的"responsive-menu-container"。添加后，您可以调整其位置。

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

编辑position:absolute:

如果您正在使用参考库的菜单栏和自动创建这些内容，您也可以使用position:absolute .menu类。这样的:

@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;
}