Question

亲爱的所有我是基础的初学者，我被困在我的代码中的中型设备......我需要你的建议，以便我能找到我的错误： - 我的代码是： -

<div class="row">
            <div class="large-6 medium-6 small-8 columns">
                <ul class="dropdown menu" data-dropdown-menu>
                    <li class=" " id="logo"><a href=""><img src="img/home/logo/logo.png"></a></li>
                    <li class=" "><a href="#">Home - Payment Result - contact information</a></li>
                </ul>
            </div>
            <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium" >
                <a  id="nav-toggle" href="#" title="Navigation" data-toggle><span></span></a>   
            <!--    <button class="menu-icon" type="button" data-toggle></button>
                <div class="title-bar-title"></div>-->
            </div>
            <div class="top-bar"  id="main-menu" >
                <div class="top-bar-right large-5 medium-6 small-4 columns"  >
                    <ul class="menu" data-responsive-menu="drilldown medium-dropdown">
                        <li><a href="#">How does it work</a></li>
                        <li><a href="#">My order</a></li>
                        <li><a href="#"><span class="icon-cart"></span></a></li>
                        <li class="has-submenu">
                            <a href="#"><span class="icon-face"></span></a>
                            <ul class="submenu menu vertical" data-submenu>
                                <li><a href="#">Pistachios</a></li>
                                <li><a href="#">Pistachios</a></li>
                                <li><a href="#">Pistachios</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

[请点击屏幕截图]

enter image description here

Answer 1

您的问题是iPad是large设备和medium设备。

Zurb's documentation说：

小：任何屏幕。

中：任何640像素或更宽的屏幕。

大：任何1024像素或更宽的屏幕。

iPad的CSS分辨率＆＃39; （媒体查询的工作原理）是1024px x 768px，尽管后期版本的实际分辨率为2048px x 1536px。

因此，肖像为medium，横向为large。

因此，在您的上述代码中，medium-*将不会是iPad上的可见结构，而.title-bar将会成为横向，反之亦然。所以你要么：

如果你正在使用CSS;为iPad创建一个新的断点（这是一个很好的资源： CSS-Tricks - device media queries）
或者，如果您正在使用SASS，则可以在标准中重复使用mixin Foundation SASS包以与（1）类似的方式创建特定的CSS：
```
    @media screen and #{breakpoint(768px)} and #{breakpoint(1024px down)} {
      //iPad CSS here
    }
```
将其视为large＆amp; medium设备并更改您的HTML

.top-bar也不是网格系统的一部分，您有.top-bar-left和.top-bar-right，但我不确定您可以使用列控制这些数量和行。

所以这可能适合你（但它不能控制左右两个部分的宽度）：

<div class="row">
  <div class="large-6 medium-6 small-8 columns end">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class=" " id="logo">
        <a href=""><img src="img/home/logo/logo.png"></a>
      </li>
      <li class=" "><a href="#">Home - Payment Result - contact information</a></li>
    </ul>
  </div>
  <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
    <a id="nav-toggle" href="#" title="Navigation" data-toggle><span></span></a>
    <!--    <button class="menu-icon" type="button" data-toggle></button>
                <div class="title-bar-title"></div>-->
  </div>
  <div class="top-bar" id="main-menu">
    <div class="top-bar-left">
      <p class="show-for-large-only">
        ERROR
      </p>
    </div>
    <div class="top-bar-right">
      <ul class="menu" data-responsive-menu="drilldown medium-dropdown">
        <li><a href="#">How does it work</a></li>
        <li><a href="#">My order</a></li>
        <li><a href="#"><span class="icon-cart"></span></a></li>
        <li class="has-submenu">
          <a href="#"><span class="icon-face"></span></a>
          <ul class="submenu menu vertical" data-submenu>
            <li><a href="#">Pistachios</a></li>
            <li><a href="#">Pistachios</a></li>
            <li><a href="#">Pistachios</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

A JSfiddle of this code

标题没有响应

1 个答案: