css - 移动设备的不同标题

Question

为客户制作静态网站，他们希望为移动设备提供完全不同的主菜单设计(更多的是应用程序的外观和感觉)。

提供此服务的最佳方式是什么？有两个标题标签，一个用于桌面，一个用于移动？

这就是我现在拥有的:

<header class="desktop-only-header">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</header>

<header class="mobile-only-header">
  <ul>
    <li><a href="/"><i class="icon-home"></i></a></li>
    <li><a href="/about"><i class="icon-about"></i></a></li>
    <li><a href="/contact"><i class="icon-contact"></i></a></li>
    <li><a href="/best-articles"><i class="icon-best-articles"></i></a></li>
    <li><a href="#"><i class="icon-social"></i></a></li>
  </ul>
</header>

我尝试只使用一个 header ，但更改移动设备上的外观(显示和隐藏内容)所需的 CSS 数量太多了。

Answer 1

您可以使用mediaqueries根据屏幕尺寸显示和隐藏不同的内容。

例如:

/* Small devices (tablets, 768px and up) */
@media (max-width: 768px) { 
  #header_desktop{
   display:none;
  }
  #header_mobile{
   display:initial;
  }
}

当屏幕宽度低于 768px 时，上面的代码将隐藏桌面导航并显示移动导航。确保一般情况下隐藏移动导航。

.mobile-only-header {
  display: none;
}


/* Small devices (tablets, 768px and up) */

@media (max-width: 768px) {
  .desktop-only-header {
    display: none;
  }
  .mobile-only-header {
    display: initial;
  }
}

<header class="desktop-only-header">
  <ul>
    <li><a href="#">Desktop</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>

<header class="mobile-only-header">
  <ul>
    <li><a href="#">Mobile</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</i></a></li>
    <li><a href="#">Contact</i></a></li>
  </ul>
</header>