Responsive merupakan sebuah teknik menciptakan halaman website mengikuti ukuran layar browser
Standar ukuran layar untuk PC/komputer, laptop, tablet, smartphone (dalam pixel):
- 360 x 640 , 360 x 740 , 480 x 853, 411 x 731 - ukuran ini biasanya digunakan pada Smartphone. Cuma untuk ukuran ini hanya untuk viewport(lebar fisik layar).
- 1024 x 768 - ukuran ini biasanya digunakan pada Tablet & Smartphone.
- 1280 x 720 - ukuran ini biasanya digunakan pada Laptop, beberapa Tablet & Smartphone(mid-end).
- 1366 x 768 - ukuran ini biasanya digunakan pada Laptop.
- 1920 x 1080 - ukuran ini biasanya digunakan pada Laptop dan juga Monitor Komputer (FullHD).
- 2560 x 1440 - ukuran ini biasanya digunakan pada Monitor Komputer dan beberapa High-end Laptop dan juga Smartphone(Quad HD).
- 3840 x 2160 - ukuran ini biasanya digunakan pada (high-end) Monitor Gaming (4k)
- 7680 x 4320 - ukuran ini biasanya digunakan pada (high-end) Monitor Gaming (8k)
Langkah - Langkah :
Menambahkan vieport pada header halaman
Menggunakan Property @media{...} pada style
