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

在下面的媒体查询中使用。由于最小宽度：600像素，将无法检测到您的移动设备

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

Answer 2

好像您已经将@media查询的min-width和max-width混淆了。因此，尝试以这种方式使用它：

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

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

2 个答案: