Cara menerapkan CSS untuk setiap komputer/ponsel [WordPress]

2019 7 年 月 日 10

Dengan asumsi situasi ini

  • Saya ingin mencerminkan CSS hanya di layar komputer/ponsel
  • Saya mengubah desain dengan CSS tambahan, tetapi gagal di smartphone
  • Saya ingin mengatur padding dan margin yang cocok dengan perangkat seperti smartphone/tablet/PC
  • Jumlah CSS yang ingin Anda terapkan tidak banyak

cara

Cukup masukkan "@media screen", tentukan lebar layar perangkat yang ingin Anda refleksikan dengan "and ( )", dan masukkan kode CSS di "{ }".　

  • Mencerminkan hanya PC
@layar media dan (min-width: 980px) { masukkan CSS di sini }　
  • Refleksikan hanya tablet
@layar media dan (min-width: 481px) dan (max-width: 979px) { masukkan CSS di sini }　
  • Mencerminkan hanya ponsel
@media screen and (max-width: 480px) { masukkan CSS di sini }　
  • PC dan tablet saja atau tablet dan ponsel saja
/* desktop dan tablet */ @layar media dan (lebar campuran: 481px){ css di sini} /* tablet dan seluler */ @layar media dan (lebar maks: 980px) { css di sini }　

「lebar maksimal: 480 piksel" artinya lebar layar adalahPerangkat hingga 480 px = 480px atau kurangsmartphone, dll.

dan sebaliknya"min-lebar: 980px"gigi,Minimal 980 px = 980 px atau lebihKomputer saya terasa seperti lebar layar.

  • PC dan tablet saja

Lebar layar didasarkan pada hal berikut, yang berlaku untuk sebagian besar perangkat.

Ponsel pintar : 480px atau kurang
Tablet : 768~980px
PC: 980px atau lebih

Referensi: lebar layar

Bahkan dengan ponsel cerdas, jika Anda meletakkannya ke samping, ukurannya akan melebihi 480 px.Bahkan di komputer pribadi, jika ditampilkan hanya di separuh layar, itu akan menjadi lebar tablet.

Di iPhone, gambar berikut bisa dijadikan referensi ukuran layar. Di CSS lebar layar adalahpx (piksel)Tapi di sisi perangkatpoinHarap dicatat bahwa ini dinyatakan sebagai .

Gambar: Kutipan dari sumber yang dikutip The Ultimate Guide To iPhone Resolutions

Misalnya, iPhone X
titik: 375 x 812
piksel: 1125 x 2436
Namun, lebar yang ditentukan oleh CSS adalah 375.

pemrograman