CSS Grid 在移动浏览器上没有响应答案

【问题标题】：CSS Grid is not responsive on mobile-browsersCSS Grid 在移动浏览器上没有响应
【发布时间】：2018-11-07 15:27:19
【问题描述】：

我制作了一个响应式网站，并且在我调整浏览器大小时运行良好，但该网站仅在智能手机上运行，只有当我添加 @media 时它才在移动浏览器上运行 p>

我的 CSS：

.Footer {
background: #222;
color: #fff;
padding: 2px;
align-items: center;
text-align: center;


@media(min-width: 600px) {
.Footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
}

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example
@media(max-width: 600px) { //your code } or @media only screen and (max-width: 600px){ //your code }
这款手机是哪个浏览器？它可能不受支持。
所有智能手机。当我使用桌面浏览器并重新调整浏览器大小时，它可以工作。但是当我使用智能手机时不起作用。在 Google Chrome Toogle 设备工具栏上也不起作用！ :(
看看 minmax()，更多信息在这里rachelandrew.co.uk/archives/2016/04/12/…

标签： css responsive-design grid css-grid smartphone

【解决方案1】：

使用下面的媒体查询。由于 min-width: 600px 不会检测到您的移动设备

@media(max-width: 600px) { 
    //your code 
}

或

@media only screen and (max-width: 600px){ 
     //your code 
}

或者您可能错过了添加可以在下面使用的视口

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

【讨论】：

您的媒体查询正在工作，因为它正在堆叠您的元素。请详细说明您希望它的外观？
或者检查你的视口，它必须是移动响应的
Varsha Dhadge - OMG，谢谢我忘记添加视口了，谢谢

【解决方案2】：

您似乎混淆了@media 查询的最小宽度和最大宽度。所以，尝试这样使用它：

@media(max-width: 600px) {
.Footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
}

【讨论】：