`max-width` atau `max-device-width: Pertanyaan Media Manakah yang Perlu Saya Gunakan untuk Reka Bentuk Responsif?`

Perlukah saya Menggunakan lebar peranti maks atau lebar maks?

TL;DR

Untuk tapak web responsif, lebih baik menggunakan lebar-min/lebar-maks daripada lebar-peranti-min/lebar-peranti-min dalam media pertanyaan untuk menyasarkan julat saiz skrin yang lebih luas.

Penjelasan

ciri media lebar peranti tidak digunakan dalam draf spesifikasi Pertanyaan Media Tahap 4 2018. Mereka menganggap saiz skrin sebenar peranti dan bukannya port pandangan penyemak imbas, yang boleh menyebabkan ketidakkonsistenan dalam gelagat responsif.

Mengapa Menggunakan lebar maks vs. lebar peranti maks?

• lebar maksimum menyasarkan saiz port pandangan, memastikan responsif merentas peranti dan tetingkap penyemak imbas saiz.
• lebar peranti maks menyasarkan saiz skrin fizikal peranti, mengehadkan responsif apabila mengubah saiz tetingkap penyemak imbas.

Pertimbangan Tambahan

• Gunakan teg meta viewport () untuk mengawal penskalaan port pandangan penyemak imbas.
• Pertimbangkan ciri media khusus peranti (cth., tindakan sentuh) untuk pengalaman skrin sentuh yang lebih baik.

Lagi Membaca

• [Quirksmode.org - Pixel is not a pixel is not pixel](https://www.quirksmode.org/mobile/prefsizes.html)
• [W3 - Pertanyaan Media Tahap 4 Spesifikasi](https://www.w3.org/TR/mediaqueries-4/#device-width)
• [Google Developers - Web Fundamentals - Viewport](https://developers.google.com/ web/fundamentals/design-and-ui/responsive-design/viewport)
• [Pembangun Google - Asas Web - Media CSS responsif pertanyaan](https://developers.google.com/web/fundamentals/design-and-ui/responsive-design/css-media-queries)
• [MDN - Menggunakan teg meta viewport untuk mengawal reka letak pada penyemak imbas mudah alih](https://developer.mozilla.org/en-US/docs/Glossary/Viewport)

Atas ialah kandungan terperinci `max-width` atau `max-device-width: Pertanyaan Media Manakah yang Perlu Saya Gunakan untuk Reka Bentuk Responsif?`. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!