为什么我的电网不能在移动设备上响应？

我创建了这个网格，它在各种宽度的浏览器中工作得非常好 - 盒子正在很好地移动到下一行，并始终保持其大小。然而，在移动设备上，每一行都有太多的盒子，所有的东西都缩小了。为什么我的电网不能在移动设备上响应？

我可以得到移动视图的行为像浏览器？谢谢！

<div id="container"> 
<div class="box"> 
    <div class="dato">1</div> 
    <img src="http://placehold.it/150x150" /> 
</div> 
<div class="box"> 
    <div class="dato">2</div> 
    <img src="http://placehold.it/150x150" /> 
</div> 
<div class="box"> 
    <div class="dato">3</div> 
    <img src="http://placehold.it/150x150" /> 
</div> 
<div class="box"> 
    <div class="dato">4</div> 
    <img src="http://placehold.it/150x150" /> 
</div> 
<div class="box"> 
    <div class="dato">5</div> 
    <img src="http://placehold.it/150x150" /> 
</div> 
<div class="box"> 
    <div class="dato">6</div> 
    <img src="http://placehold.it/150x150" /> 
</div> 
<div class="box"> 
    <div class="dato">7</div> 
    <img src="http://placehold.it/150x150" /> 
</div> 
<div class="box"> 
    <div class="dato">8</div> 
    <img src="http://placehold.it/150x150" /> 
</div> 
<div class="box"> 
    <div class="dato">9</div> 
    <img src="http://placehold.it/150x150" /> 
</div> 
<div class="box"> 
    <div class="dato">10</div> 
    <img src="http://placehold.it/150x150" /> 
</div> 
<div class="box"> 
    <div class="dato">11</div> 
    <img src="http://placehold.it/150x150" /> 
</div> 
<div class="box"> 
    <div class="dato">12</div> 
    <img src="http://placehold.it/150x150" /> 
</div> 
<div class="box"> 
    <div class="dato">13</div> 
    <img src="http://placehold.it/150x150" /> 
</div> 
<div class="box"> 
    <div class="dato">14</div> 
    <img src="http://placehold.it/150x150" /> 
</div> 
<div class="box"> 
    <div class="dato">15</div> 
    <img src="http://placehold.it/150x150" /> 
</div> 
<div class="box"> 
    <div class="dato">16</div> 
    <img src="http://placehold.it/150x150" /> 
</div> 
<div class="box"> 
    <div class="dato">17</div> 
    <img src="http://placehold.it/150x150" /> 
</div> 
<div class="box"> 
    <div class="dato">18</div> 
    <img src="http://placehold.it/150x150" /> 
</div> 
<div class="box"> 
    <div class="dato">19</div> 
    <img src="http://placehold.it/150x150" /> 
</div> 
<div class="box"> 
    <div class="dato">20</div> 
    <img src="http://placehold.it/150x150" /> 
</div> 
<div class="box"> 
    <div class="dato">21</div> 
    <img src="http://placehold.it/150x150" /> 
</div> 
<div class="box"> 
    <div class="dato">22</div> 
    <img src="http://placehold.it/150x150" /> 
</div> 
<div class="box"> 
    <div class="dato">23</div> 
    <img src="http://placehold.it/150x150" /> 
</div> 
<div class="box"> 
    <div class="dato">24</div> 
    <img src="http://placehold.it/150x150" /> 
</div>

.box { 
    overflow: auto; 
    width: 149px; 
    display:inline-block; 
    margin:10px 0; 
    border-radius:5px; 
    height: 149px; 
    cursor: pointer; 
    cursor: hand; 
    border: 1px solid #dcdcdc; 
    margin-top: 20px; 
    position: relative; 
} 
#container { 
    text-align:center; 
    width: 80%; 
    font-family:'Open Sans'; 
    margin-left: auto; 
    margin-right: auto; 
} 
.text { 
    padding: 10px 0; 
    font-weight:bold; 
    text-align:center; 
} 
.first { 
    height: 190px; 
} 
.dato { 
    position: absolute; 
    top: 35px; 
    font-size: 350%; 
    width: 100%; 
    color: #fff; 
}

的jsfiddle：https://jsfiddle.net/e4ds38dr/

来源

2015-10-20 user2806026

在头部或逻辑加

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

将修复它。

来源

2015-10-20 20:40:18

它会出现在我通过看你的项目，代表网格结构将与bootstrap.If引导最好的办法是使用，那么你可以改变

<div id="container"> with <div class="container-fluid">

也编辑

<meta name= "viewport"...

头部标记可以帮助缩放，但我必须找到确切的语法（对不起，离开工作）

来源

2015-10-20 20:48:36

为什么我的电网不能在移动设备上响应？

回答

相关问题