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

Posted 2023-03-06

【中文标题】使用 chrome 设备工具栏和媒体查询进行响应式布局调试

【英文标题】：responsive layout debugging with chrome device-toolbar and media queries

【发布时间】：2017-10-31 02:48:46

【问题描述】：

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

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

所以在超过 767px 的分辨率下，它看起来像这样：

当我调整到低于 767px 的分辨率时，它看起来像这样（更大，没有带阴影的框等）：

然后，我在谷歌浏览器中切换到设备视图

我切换到iPhone 5，分辨率为width:320px和height:568px 结果看起来像这样（比如大于 767px 的那个）：

不应该是低于 767px 的结果吗？

【问题讨论】：

切换到iphone 5后是否尝试重新加载页面？

是的，我做到了。结果还是一样。

不确定这是否是 chrome 中的问题，但您是否在脑海中添加了“" ?

@Traver 不错！完美，这就是重点，谢谢！

我会为有同样问题的其他用户写一个答案

【参考方案1】：

在你的脑海中添加视口标签，如：

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

关于视口的更多信息：

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