BAGAIMANA - Breakpoints Perangkat Khas
Pelajari cara menggunakan kueri media untuk titik henti sementara perangkat umum.
Breakpoints Perangkat Khas
Ada banyak sekali layar dan perangkat dengan tinggi dan lebar yang berbeda, sehingga sulit untuk membuat titik henti sementara yang tepat untuk setiap perangkat. Untuk mempermudah, Anda dapat menargetkan lima grup umum:
Contoh
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
Halaman Terkait
Tutorial CSS: Kueri Media CSS
Tutorial CSS: Contoh Kueri Media CSS
Referensi CSS: Aturan @media
Tutorial RWD: Desain Web Responsif dengan Kueri Media
Tutorial JavaScript: Metode window.matchMedia()