html - 桌面移动视图中显示的 CSS 网格与实际移动视图不同
问题描述
想让网格在所有视图上都是水平的。
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
从 Google chrome 移动视图考虑移动响应时,它似乎是水平的。
但是当从实际的移动设备上检查它的垂直时。
我想让它无处不在“水平”像这张图片,怎么做?
解决方案
推荐阅读
- javascript - 上传到 Heroku 的 Git 相关问题
- functional-programming - 了解 OCaml 中的模块参数
- c++ - 参数包和 std::array
- php - 如何将回声连接到变量?
- url - 哈希解密类型MD5
- html - 在 Mac 上使用 TextEdit...不显示为网页。建议?
- android - 如何以编程方式更改 AppBarLayout 偏移量?
- mysql - 我的 sql 语法有一个错误,因为键 'PRIMARY' 的重复条目 ''
- mysql - 如何在 Golang 中使用另一个数组的 ID 填充数组
- python - 如何将行值休息到另一个数据帧的第 n 行值