css - 如何在设备屏幕上显示特定的菜单列表

Question

我正在尝试创建一个响应式电子邮件导航菜单，其中菜单列表将显示但不包括桌面屏幕上的 Shop e-conolight，但随后在移动设备上它将仅显示 Shop e-conolight 和 Sale。

<li><a class="non-mobile" title="" href="#">LED Lightning</a></li>
<li ><a class="non-mobile" title="" href="#">Linear Fluorescent</a></li>
<li><a class="non-mobile" title="" href="#">Wall Packs</a></li>
<li><a class="non-mobile" title="" href="#">Floodlights</a></li>
<li><a class="non-mobile" title="" href="#">Exit &amp; Emergency</a></li>
<li ><a class="show-mobile" title="" href="#">Shop e-conolight</a></li>
<li class="active"><a title="" href="#" class="sale" style="color:#fff;">Sale</a></li>

@media only screen and (min-device-width:320px) and (min-device-width:480px) and (max-width: 600px) {
      .non-mobile { display: none; }
      .show-mobile{
            display:inline-block;
      } 
}
@media screen and (max-width: 3024px) {
      .show-mobile{ display: none; }
}

Answer 1

@media(min-width:601px)
{
  .show-mobile{display:none;}
  .non-mobile{display:inline-block;}
}

@media(max-width:600px)
{
  .show-mobile{display:inline-block;}
  .non-mobile{display:none;
}
.sale{display:inline-block}

这将在屏幕宽度下降到小于 600 像素时隐藏非移动设备，当屏幕大于 600 像素时将隐藏仅移动设备。

这是它的小提琴。

您可能希望将 non-mobile 和 show-mobile 类更改为li元素以隐藏实际元素，而不仅仅是a内部的标签。

编辑：这是一个小提琴。