CSS Grid 对移动浏览器没有响应

Question

我制作了一个响应式网站，当我重新调整浏览器大小时效果很好，但是该网站不能只在智能手机上运行，​​只有当我添加@media 时它才不能在移动浏览器上运行

我的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;
}
}

Answer 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">