Question

我已经创建了这个网格，它在各种宽度的浏览器中都能很好地工作 - 盒子很好地移动到下一行并始终保持它们的大小。然而，在移动设备上，所有内容都只是按比例缩放，每条线上都有太多的框。

我可以让移动视图像浏览器一样运行吗？谢谢！

<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/

Answer 1

逻辑添加

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

头部中的

将修复它。

Answer 2

通过查看你的项目，我会看到表示网格结构的最佳方式是使用bootstrap。如果使用了bootstrap，你就可以改变

res0: () => Int = <function0>
res1: () => Int = <function0>
res2: () => Int = <function0>
res3: () => Int = <function0>
res4: () => Int = <function0>
res5: () => Int = <function0>

还要编辑

val

head部分中的

标签有助于缩放，但我必须找到确切的语法（抱歉离开工作）

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

2 个答案: