为什么@media only screen and (min-width: 768px) 也适用于屏幕宽度小于768px

Question

最小宽度 768 的 css 在移动设备上无法正常工作。 但是相同的 css 在 chrome 桌面浏览器中宽度小于 768 的 inpect 模式下工作正常。

@media only screen and (min-width: 768px){
#main {
    max-width: 75%;
    float: left;
}
}

但是当我在检查工具中切换到移动模式时，它又无法正常工作。

我正在尝试编辑博客经典主题。 博客链接https://egadgetdeals.blogspot.com/2019/11/what-youll-build-in-part-1.html?m=1

Answer 1

缺少用于避免缩放的元标记视口，将其添加到 head 标记中：

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