Question

我正在写我的第一个网站www.shegoesplacesandseesthings.com。在小屏幕上查看时，顶部导航菜单变为一个小图标，而不是'svg viewBox'，可以单击该按钮打开菜单。这可以在笔记本电脑上使用鼠标，甚至在iPad上也能正常工作，图标是可点击的。但是，在iPhone屏幕上，菜单会调整为图标，但不可点击。我只用html和css编写（我刚开始学习）。

我的问题是，是否可以在iPhone上点击图标？我知道媒体查询可以用于调整不同大小屏幕的网页大小，还是我需要使用Javascript？

以下是设置菜单栏的html和css代码。

 <nav class="site-nav">
  <span class="menu-icon">
    <svg viewBox="0 0 18 15" width="18px" height="15px">
      <a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
    </svg>
  </span>

  <div class="trigger">
    {% for my_page in site.pages %}
      {% if my_page.title %}
      <a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
      {% endif %}
    {% endfor %}
  </div>
</nav>


.site-nav {
  float: right;
  line-height: 56px;

  .menu-icon {
    display: none;
  }


@include media-query($on-palm) {
  position: absolute;
  top: 9px;
  right: $spacing-unit / 2;
  background-color: $background-color;
  border: 1px solid $grey-color-light;
  border-radius: 5px;
  text-align: right;

  .menu-icon {
    display: block;
    float: right;
    width: 36px;
    height: 26px;
    line-height: 0;
    padding-top: 10px;
    text-align: center;

    > svg path {
      fill: $grey-color-dark;
    }
  }

  .trigger {
    clear: both;
    display: none;
  }

  &:hover .trigger {
    display: block;
    padding-bottom: 5px;
  }

Answer 1

:active伪类在iOS中不起作用（很好地解释here）。

如果您不愿意添加一些JavaScript支持，一种解决方法可能是在:focus

上:active之外使用.site-nav伪类

.site-nav:active .trigger,
.site-nav:focus .trigger { display: block; padding-bottom: 5px; }

Answer 2

这并不完全回答您的问题，但您可能需要查看Bootstrap框架。许多这些问题已经解决，包括跨多个设备，浏览器和屏幕尺寸的网站外观。如果你正在学习HTML和CSS，那么你可以通过一些关于如何使用Bootstrap的教程来学习它，它会教你很多关于Divs和一些聪明的CSS的可能性。这是链接http://getbootstrap.com/

调整大小后如何使菜单可点击？

2 个答案: