html - 使用 Chrome 设备工具栏和媒体查询进行响应式布局调试

我正在尝试使用 html 和 css 为我的应用程序编写一个登录表单。在我的 CSS 中，我使用 @media-queries:

@media (max-width: 767px){
    body {
        font-size: 25px;
    }
    ... and some more
}

因此，在分辨率超过 767px 时，它看起来像这样:

当我将分辨率调整为低于 767px 时，它看起来像这样(全部更大，没有带有阴影的框等):

然后，我在 Google Chrome 中更改为设备 View

我切换到分辨率为 width:320px 和 height:568px 的 iPhone 5 结果如下所示(比如大于 767px 的):

结果看起来不应该低于767px吗？

最佳答案

在你的头脑中添加视口(viewport)标签，例如:

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

有关视口(viewport)的更多信息:

https://www.w3schools.com/css/css_rwd_viewport.asp

关于html - 使用 Chrome 设备工具栏和媒体查询进行响应式布局调试，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44265435/