Bagaimana membuat: titik pemotongan perangkat tipikal

Belajar bagaimana menggunakan media query untuk titik pemotongan perangkat biasa.

Titik pemotongan perangkat tipikal

Ada banyak layar dan perangkat dengan tinggi dan lebar yang berbeda, sehingga membangun titik pemotongan yang akurat untuk setiap perangkat adalah sulit.

Untuk mempermudah operasi, Anda dapat menempatkan lima kategori yang umum:

Contoh

/* Perangkat sangat kecil (handphone, 600px dan di bawah) */
@media only screen and (max-width: 600px) {...}
/* Perangkat kecil (tablet portrait dan handphone large, 600px dan di atas) */
@media only screen and (min-width: 600px) {...}
/* Perangkat menengah (tablet landscape, 768px dan di atas) */
@media only screen and (min-width: 768px) {...}
/* Perangkat besar (laptop/komputer meja, 992px dan di atas) */
@media only screen and (min-width: 992px) {...}
/* Perangkat yang sangat besar (laptop besar dan komputer meja, 1200px dan di atas) */
@media only screen and (min-width: 1200px) {...}

Coba sendiri

Halaman yang berhubungan

Tutorial:Media query CSS

Tutorial:Contoh kasus media query CSS

Panduan Referensi:Atur @media CSS

Tutorial:Mencapai desain Web responsif melalui media query

Panduan Referensi:Metode JavaScript window.matchMedia()