元素出現在移動

我遇到這個問題很頭疼，我不知道它是從元素出現在移動

未來小基本上我做這個網站，好，直到你試試就一切正常手機，它非常小。我在其他網站上使用過相同的方法，並且根本沒有發生過任何變化，我不必使用meta或任何媒體查詢，它仍然只是一個導航菜單。所以我使用ul與類行和李與col-sm-12和col-md-4，所以它的工作原理就像所需。

這就是PC視圖

這就是移動視圖

所有尺寸都在REM和EM。該itens應該移動時，堆棧和它了，但一切它的超小

演示： https://jsfiddle.net/nnhfqL2L/2/

body { 
margin: 0; 
padding: 0; 
border: 0; 
background-color: #666; 
font-family: 'Roboto', Verdana, Tahoma, sans-serif; 
} 

/*Header*/ 
/*Nav*/ 
nav { 
    border-bottom: 4px solid #888; 
} 

nav ul { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    list-style-type: none; 
    background-color: #fff; 
    text-align: center; 
     font-size: 1.5rem; 
} 

    nav ul li { 
     display: inline-block; 
    } 

     nav ul li a,a:hover { 
      text-decoration: none; 
      color: #000; 
     } 

      nav ul li section { 
       padding: 0.8em; 
      } 

      nav ul li .menuStrap { 
       background-color: #000; 
       height: 3px; 
       margin: 0 auto; 
       width: 0; 
       transition: width 0.2s; 
       transition-timing-function: ease-out; 
      } 

      nav ul li a:hover .menuStrap { 
       width: 100%; 
      } 


<header> 
    <nav> 
     <ul class="row">     
      <li class="col-sm-12 col-md-3"> 
       <a href="#">      
        <section>Winpad ★</section> 
        <div class="menuStrap"></div>      
       </a> 
      </li> 
      <li class="col-sm-12 col-md-3"> 
       <a href="#"> 
        <section>Produtos</section> 
        <div class="menuStrap"></div> 
       </a> 
      </li> 
      <li class="col-sm-12 col-md-3"> 
       <a href="#"> 
        <section>Sobre</section> 
        <div class="menuStrap"></div> 
       </a> 
      </li> 
      <li class="col-sm-12 col-md-3"> 
       <a href="#"> 
        <section>Contato</section> 
        <div class="menuStrap"></div> 
       </a> 
      </li> 
     </ul>  
    </nav> 

</header>

來源

2015-10-01 AdowTatep

上傳相關代碼/創建演示來幫助你：） –

會做到這一點，只是片刻 – AdowTatep

把這個在<head>：

<meta name="viewport" content="width=device-width, initial-scale=1">

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

順便說一句，這是更好的做法，您的瀏覽器窗口中手動調整到想要的大小，你可以下載擴展/插件瀏覽器來調整您的瀏覽器窗口或顯示當前窗口的大小。

來源

2015-10-01 12:40:24 x13

我已經得到它在其他網站沒有這個標籤工作。我真的必須使用它嗎？ – AdowTatep

Surprisinsingly，使用此標籤，boostrap不工作，因爲它應該 – AdowTatep

@AdowTatep試圖取消選中「縮放到適合」在Chrome的設備大小預覽，也許這有助於 – x13

即視口的問題：改變你的視口元標記：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimum-scale=1"/>

來源

2015-10-01 12:40:12 Arun

令人印象深刻的是，有了這個標籤，boostrap不能正常工作。 – AdowTatep

一旦你調整了大小視圖，請嘗試刷新 – Arun

我知道我知道，而不是一個接一個地堆疊，這一切都很混亂。 [看看它的元件打印]（http://i.imgur.com/UF4HKR4.png） – AdowTatep

在<head>部分試試這個：

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
maximum-scale=1.0, user-scalable=no" />

或媒體查詢，你可以使用不同的字體大小小分辨率..

@media(min-width:480px){html{font-size: 90%}}

來源

2015-10-01 12:45:49

我做完這個之後，而不是堆積一個接一個（像在帖子上的移動圖像），這一切都是凌亂的[看看打印]（http://i.imgur.com/UF4HKR4.png） – AdowTatep

元素出現在移動

回答

相關問題