Responsive Web Design

Table of Contents

Web Developer - This article is part of a series.

Part 1: Pengantar Web Developer

Part 2: Dasar CSS (Cascading Style Sheets)

Part 3: CSS Layouting

Part 4: CSS 3

Part 5: This Article

Part 6: Dasar JavaScript Lanjutan

Part 6: Dasar Java Script

Responsive Web Design #

Sebuah pendekatan yang menyarankan agar proses perancangan dan pembangunan sebuah web app harus merespon terhadap perilaku pengguna berdasarkan dari ukuran layer, platform dan orientasi layer.

Prinsip Responsive Web Design #

Viewport #

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Viewport Meta Tag	Tanpa Viewport Meta Tag

Breakpoint #

Media Query #

@media (min-width: 576px) {
}

@media (min-width: 768px) {
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}

Fixed vs Fluid Layout #

Mobile First Design #