Ich entwickle eine responsive Website mit React. Für das Styling verwende ich CSS-Stylesheets. Der responsive Teil wird in CSS mithilfe von @media-Abfragen implementiert.
Das Problem besteht darin, dass bei Verwendung von Chrome die Elemente gr??er erscheinen und das Layout so aussieht, als würde ich über einen kleineren Bildschirm (Tablet) auf die Website zugreifen. Soweit ich wei?, ?denkt“ Chrome, dass das Ansichtsfenster kleiner ist, und antwortet auf Medienanfragen mit den entsprechenden Informationen.
Das Problem trat w?hrend der Entwicklung auf, nach einer Zeit normaler Arbeit.
Was mache ich falsch und wie kann ich das beheben?
Hinweis: Beim ?ffnen der Website in Firefox funktioniert alles einwandfrei. Wenn ich au?erdem die Entwicklungstools in Chrome ?ffne (F12 aktivieren) und ?Ger?tesymbolleiste wechseln“ auf ?True“ setze (Strg + Umschalt + M), werden die Abmessungen korrekt eingestellt. Dieses Problem tritt nur bei Verwendung von ?Normal Chrome“ auf.
如果元素顯得更大并且您想根據(jù)設(shè)備的寬度進(jìn)行設(shè)計(jì),請使用 vw
(viewWidth) 來設(shè)置元素的大小。使用 vh
根據(jù)設(shè)備的高度設(shè)置尺寸。
您可以設(shè)置字體大小、div 元素的高度/寬度等。在媒體查詢中使用此功能,以便在使用手機(jī)時(shí)字體或?qū)挾炔粫?huì)變得太小。