Apakah kalian pernah mengakses sebuah website yang ketika kalian akses pada perangkat seperti handphone berbeda tampilannya dibandingkan dengan ketika kalian akses menggunakan Laptop/ komputer, itu adalah salah satu bentuk responsif pada sebuah website. Responsif pada sebuah website menggunakan metode Breakpoint untuk bisa membatasi sampai mana tampilan ini dipertahankan bentuknya dan harus menyesuaikan dengan lebar layar yang digunakan dalam mengakses.
Baca Juga : Apa yang dimaksud Mobile Friendly Website dan Cara membuatnya
Pada CSS kita bisa membatasi sebuah tampilan seperti pada kasus sebagai berikut :
- Bagaimana cara menargetkan css ini hanya di tampilan mobile/ tablet/ desktop saja.
- Bagaimana cara meminimalkan css ketika di beberapa tampilan saja.
Lalu bagaimana caranya, kalian hanya perlu menambahkan @media di kode sebelum fungsi css digunakan, beberapa @media sebagai berikut dibawah ini :
1. 📱Smartphones, iPhone, portrait 480x320 phones
@media (min-width:320px) {/* code css */}2. 📱Portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide.
@media (min-width:481px) { /* code css */ }3. 📱Portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones
@media (min-width:641px) { /* code css */ }4. 💻Tablet, landscape iPad, lo-res laptops ands desktops
@media (min-width:961px) { /* code css */ }5. 💻Big landscape tablets, laptops, and desktops
@media (min-width:1025px) { /* code css */ }6. 💻Hi-res laptops and desktops
@media (min-width:1281px) { /* code css */ }Dengan beberapa script diatas sekarang kalian bisa mentarget css dengan lebih spesifik pada perangkat yang inginkan. Pada kode diatas bisa kalian ubah sesuai kebutuhan, min-width == minimal lebar sesuai nilai pixel atau max-width == maksimal lebar pixel css ini akan berfungsi.
Contoh kasus :
Aku ingin ketika pada tampilan handphone (iphone X - 414px) background body menjadi warna merah.
@media (max-width:414px) {
.body {
background-color : red; }
}Baca Juga : Apa itu Bootsrap dan cara menggunakan bootsrap
Kalian bisa melakukan exploring tentang breakpoint dengan bermain dengan max/ min dan juga cutom ukuran/ width sesuai kebutuhan.
Terimakasih🙏🏻 sudah membaca artikel ini, semoga bermanfaat.
css,css tutorial,html css,css grid,learn css,css course,css tips,css for beginners,css beginners,css tutorial for beginners,css crash course,grid css,css html,css full course,css с нуля,уроки css,html e css,css coding,css tricks,css grid tutorial,css flexbox,ai css,css em,css vh,tutorial css,frontend css,learn css grid,css ita,css rem,full course css,css уроки с нуля,css курс,flex css,html css tutorial, css,breakpoint,breakpoints,css breakpoints,breakpoints css,gr breakpoint,css media query,tailwind css breakpoints,css media queries,breakpoints in tailwind css,ghost recon breakpoint,css media queries breakpoints,css breakpoints media queries,css tutorial,css responsive,responsive css,media query in css,change breakpoints in tailwind css, target,target css,css art,css target selector,css battle,css target,css tutorial,css target pseudo class,target pseudo class,css challenge,css challenge tutorial,css battle challenge,target divi css,css target class within class,css selectors,:target,псевдокласс target css,css target kullanımı,target selector in css,css target sözde sınıf,target selectors in css,target selector,css tutorials,basic css,css rules,learn css