Bagaimana untuk Menggunakan Gaya CSS Responsif Secara Eksklusif pada Peranti Mudah Alih?

Menggunakan Gaya CSS Responsif pada Peranti Mudah Alih Secara Eksklusif

Apabila mencipta gaya CSS responsif, adalah penting untuk memastikan ia digunakan hanya pada peranti yang dimaksudkan. Jika anda menyasarkan peranti mudah alih tetapi menghadapi kesukaran untuk menghalangnya daripada mengganggu persembahan desktop, pertimbangkan pendekatan berikut.

Menggunakan Julat Pertanyaan Media

Daripada menggunakan titik putus pertanyaan media tunggal, gunakan pelbagai titik putus. Ini membolehkan anda menentukan julat lebar tertentu yang gaya mudah alih harus digunakan, sambil mengecualikan peranti lain.

Berikut ialah contoh julat pertanyaan media yang menyasarkan peranti dengan lebar antara 480px dan 1024px:

<code class="css">@media all and (min-width: 480px) and (max-width: 1024px) {
  /* Mobile styles go here */
}</code>

Menentukan Julat untuk Saiz Peranti Biasa

Untuk menampung saiz peranti yang paling biasa, pertimbangkan julat berikut:

<code class="css">@media all and (min-width: 0px) and (max-width: 320px)
@media all and (min-width: 321px) and (max-width: 480px)
@media all and (min-width: 569px) and (max-width: 768px)
@media all and (min-width: 769px) and (max-width: 800px)
@media all and (min-width: 801px) and (max-width: 959px)
@media all and (min-width: 960px) and (max-width: 1024px)</code>

Menggunakan EM atau % Unit

Untuk memastikan skala gaya anda dengan baik tanpa mengira peleraian peranti, elakkan menggunakan unit px. Sebaliknya, pilih EM atau % unit. Unit EM adalah relatif kepada saiz fon elemen induk, manakala % unit adalah relatif kepada jumlah lebar elemen.

Contoh Kod

Berikut ialah versi kod anda yang dikemas kini menggunakan media pendekatan julat pertanyaan dan unit EM:

<code class="css">/* Regular desktop styles */

/* Mobile only styles for devices between 480px and 1024px */
@media all and (min-width: 480px) and (max-width: 1024px) {
  /* Mobile styles using EM units */
}</code>

Kod ini memastikan gaya mudah alih digunakan secara eksklusif pada peranti dalam julat lebar yang ditentukan sambil mengekalkan pengasingan daripada gaya desktop.

Atas ialah kandungan terperinci Bagaimana untuk Menggunakan Gaya CSS Responsif Secara Eksklusif pada Peranti Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!