元素出现在移动

我遇到这个问题很头疼，我不知道它是从元素出现在移动

未来小基本上我做这个网站，好，直到你试试就一切正常手机，它非常小。我在其他网站上使用过相同的方法，并且根本没有发生过任何变化，我不必使用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

元素出现在移动

回答

相关问题