React.js CSS 視窗寬度

Question

我正在使用 React 開發一個響應式網站。對於樣式，我使用 CSS 樣式表。回應部分是使用 @media 查詢在 CSS 中實現的。

問題是，當我使用 Chrome 時，元素看起來更大，佈局就像我從較小的螢幕（平板電腦）訪問網站一樣。我的理解是，chrome「認為」視窗較小，並使用相應的資訊回應媒體查詢。

問題出現在開發過程中，經過一段時間的正常工作後。

我做錯了什麼以及如何解決這個問題？

注意：在 Firefox 中開啟網站時，一切正常。另外，當我在 Chrome 中開啟開發工具（檢查 F12）並將「切換裝置工具列」設為 true（Ctrl Shift M）時，尺寸設定正確。僅使用“常規鑲邊”時才會出現此問題。

Answer 1

如果元素看起來更大且您想根據裝置的寬度進行設計，請使用 vw (viewWidth) 來設定元素的大小。使用 vh 根據設備的高度設定尺寸。 您可以設定字體大小、div 元素的高度/寬度等。在媒體查詢中使用此功能，以便在使用手機時字體或寬度不會變得太小。