头不响应

Question

亲爱的我在基金会的初学者和我被困在我的媒体装置的代码...我需要你的建议，这样我可以找到我的错误：-below是我的代码： -

<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像素或更宽。

尽管实际分辨率为2048px x 1536px，但对于更高版本，iPad的'CSS分辨率'（媒体查询的工作内容）为1024px x 768px。

所以肖像是medium和景观是large。

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

1. 如果你使用CSS;创建用于iPad的新的断点（这是一个很好的资源： CSS-Tricks - device media queries）

2. 或者，如果你使用SASS，您可以重用的标准 基金会SASS包混入类似的创建特定CSS方法（1）：

   @media screen and #{breakpoint(768px)} and #{breakpoint(1024px down)} { 
        //iPad CSS here 
       } 
   

3. 把它当作一个large & 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