爲什麼我的電網不能在移動設備上響應？

我創建了這個網格，它在各種寬度的瀏覽器中工作得非常好 - 盒子正在很好地移動到下一行，並始終保持其大小。然而，在移動設備上，每一行都有太多的盒子，所有的東西都縮小了。爲什麼我的電網不能在移動設備上響應？

我可以得到移動視圖的行爲像瀏覽器？謝謝！

<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

爲什麼我的電網不能在移動設備上響應？

回答

相關問題