頭不響應

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