Rumah > Artikel > hujung hadapan web > Bagaimana untuk Menggunakan Gaya CSS Responsif Secara Eksklusif pada Peranti Mudah Alih?
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.
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>
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>
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.
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!