React.js CSS 窗口宽度

Question

我正在使用 React 开发一个响应式网站。对于样式，我使用 CSS 样式表。响应部分是使用 @media 查询在 CSS 中实现的。

问题是，当我使用 Chrome 时，元素显得更大，布局就像我从较小的屏幕（平板电脑）访问网站一样。我的理解是，chrome“认为”视口较小，并使用相应的信息响应媒体查询。

问题出现在开发过程中，经过一段时间的正常工作后。

我做错了什么以及如何解决这个问题？

注意：在 Firefox 中打开网站时，一切正常。另外，当我在 Chrome 中打开开发工具（检查 F12）并将“切换设备工具栏”设置为 true（Ctrl Shift M）时，尺寸设置正确。仅使用“常规镶边”时才会出现此问题。

Answer 1

如果元素显得更大并且您想根据设备的宽度进行设计，请使用 vw (viewWidth) 来设置元素的大小。使用 vh 根据设备的高度设置尺寸。 您可以设置字体大小、div 元素的高度/宽度等。在媒体查询中使用此功能，以便在使用手机时字体或宽度不会变得太小。