CSS：PC 上的媒体查询和 phone

Question

在学习 Emacs 的同时，我正在创建一个网页 (Prince)。列数由以下指令管理：

body {
    font-family: var(--s-font-family);
    font-size: var(--normal-font-size);
    column-count: 3;
    column-gap: 10px;
}
@media screen and (min-width: 800px) {
    body {
        column-count: 3;
        column-gap: 10px;
    }
}
@media screen and (min-width: 600px) and (max-width: 799px) {
    body {
        column-count: 2;
        column-gap: 8px;
    }
}
@media screen and (max-width: 599px) {
    body {
        column-count: 1;
        column-gap: 0;
    }
}

如您在 CSS stylesheet 中所见。

现在，如果我在我的台式电脑（使用 Firefox 70）上测试上面的代码，修改浏览器的宽度 window，一切都按预期工作。但是当我用我的智能手机打开页面时（据 webfx 报道，其大小为 774x412 像素）我看到了三列，就好像媒体查询会被浏览器完全忽略一样。

哪里有问题？

Answer 1

尝试添加

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

到您页面的头部

Answer 2

您只需在 html 页面的 head 标签中添加以下元标签

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

CSS：PC 上的媒体查询和 phone

CSS: media queries on pc and phone

html

css

media-queries