Lebar tetingkap CSS React.js

Question

Saya sedang membangunkan tapak web responsif menggunakan React. Untuk penggayaan, saya menggunakan helaian gaya CSS. Bahagian responsif dilaksanakan dalam CSS menggunakan pertanyaan @media.

Masalahnya ialah apabila saya menggunakan Chrome, elemen kelihatan lebih besar dan reka letaknya seperti saya mengakses tapak dari skrin yang lebih kecil (tablet). Pemahaman saya ialah Chrome "berfikir" ruang pandang lebih kecil dan menjawab pertanyaan media dengan maklumat yang sesuai.

Masalah berlaku semasa pembangunan, selepas tempoh kerja biasa.

Apakah salah saya dan bagaimana saya boleh membetulkannya?

Nota: Apabila membuka tapak web dalam Firefox, semuanya berfungsi dengan baik. Selain itu, apabila saya membuka Alat Pembangun dalam Chrome (tandakan F12) dan tetapkan "Tukar Bar Alat Peranti" kepada benar (Ctrl + Shift + M), dimensi ditetapkan dengan betul. Masalah ini hanya berlaku apabila menggunakan "Chrome Biasa".

Answer 1

Jika elemen kelihatan lebih besar dan anda ingin mereka bentuk berdasarkan lebar peranti, gunakan vw (viewWidth) 来设置元素的大小。使用 vh untuk menetapkan dimensi berdasarkan ketinggian peranti. Anda boleh menetapkan saiz fon, ketinggian/lebar elemen div, dsb. Gunakan ciri ini dalam pertanyaan media anda supaya fon atau lebar tidak menjadi terlalu kecil apabila menggunakan telefon bimbit.