toolsmoah

Penjana Pertanyaan Media Paparan

Menjana pertanyaan media CSS untuk reka bentuk web responsif.

Tetapan Pertanyaan Media
Konfigurasi syarat pertanyaan media

Syarat 1

Pratetap
Pilih corak pertanyaan media yang biasa digunakan
CSS Dijana
@media screen and (max-width: 768px) {
  /* Your CSS rules here */
}
Titik Henti Biasa
Mudah Alih:max-width: 480px
Tablet:481px - 768px
Desktop:min-width: 1024px
Desktop Besar:min-width: 1200px
Panduan Pertanyaan Media

Ciri Media Utama

  • • lebar/tinggi: Lebar/tinggi paparan
  • • min-width/max-width: Syarat lebar minimum/maksimum
  • • orientasi: Orientasi skrin (potret/landskap)
  • • resolusi: Resolusi skrin (paparan retina, dll.)
  • • hover: Sokongan keupayaan hover
  • • pointer: Ketepatan penunjuk (sentuh/tetikus)

Petua Penggunaan

  • • Pendekatan Mobile First: Gunakan min-width untuk mereka bentuk dari skrin kecil
  • • Gabungkan syarat kompleks dengan pengendali logik
  • • Gunakan jenis media cetak untuk gaya cetak yang berasingan
  • • Gunakan resolusi untuk sokongan paparan resolusi tinggi