Desain responsif

Codelab ini adalah bagian dari kursus pelatihan Developing Progressive Web Apps, yang dikembangkan oleh tim Pelatihan Google Developers. Anda akan mendapatkan manfaat maksimal dari kursus ini jika menyelesaikan codelab secara berurutan.

Untuk mengetahui detail lengkap tentang kursus ini, lihat Ringkasan Pengembangan Progressive Web App.

Pengantar

Lab ini menunjukkan cara menata gaya konten situs Anda agar responsif.

Yang akan Anda pelajari

  • Cara menata gaya aplikasi agar berfungsi dengan baik dalam berbagai faktor bentuk
  • Cara menggunakan Flexbox untuk mengatur konten Anda ke dalam kolom dengan mudah
  • Cara menggunakan kueri media untuk mengatur ulang konten berdasarkan ukuran layar

Yang perlu Anda ketahui

  • HTML dan CSS dasar

Yang akan Anda butuhkan

  • Komputer dengan akses terminal/shell
  • Koneksi ke internet
  • Editor teks

Download atau clone repositori pwa-training-labs dari github dan instal Node.js versi LTS, jika diperlukan.

Jika Anda tidak memiliki server pengembangan lokal pilihan, instal paket http-server Node.js:

npm install http-server -g

Buka direktori responsive-design-lab/app/ dan mulai server:

cd responsive-design-lab/app
http-server -p 8080 -a localhost -c 0

Anda dapat menghentikan server kapan saja dengan Ctrl-c.

Buka browser Anda, lalu buka localhost:8080/.

Catatan: Batalkan pendaftaran pekerja layanan dan hapus semua cache pekerja layanan untuk localhost agar tidak mengganggu lab. Di Chrome DevTools, Anda dapat melakukannya dengan mengklik Hapus data situs dari bagian Hapus penyimpanan di tab Aplikasi.

Jika Anda memiliki editor teks yang memungkinkan Anda membuka project, buka folder responsive-design-lab/app/. Hal ini akan memudahkan Anda tetap teratur. Jika tidak, buka folder di sistem file komputer Anda. Folder app/ adalah tempat Anda akan membangun lab.

Folder ini berisi:

  • index.html adalah halaman HTML utama untuk situs/aplikasi contoh kami
  • modernizr-custom.js adalah alat deteksi fitur yang menyederhanakan pengujian untuk dukungan Flexbox
  • styles/main.css adalah cascading style sheet untuk situs contoh

Kembali ke aplikasi di browser. Coba perkecil lebar jendela hingga di bawah 500 px dan perhatikan bahwa konten tidak merespons dengan baik.

Buka alat developer dan aktifkan mode perangkat di browser Anda. Mode ini menyimulasikan perilaku aplikasi Anda di perangkat seluler. Perhatikan bahwa halaman diperkecil agar konten dengan lebar tetap pas di layar. Ini bukan pengalaman yang baik karena konten kemungkinan akan terlalu kecil bagi sebagian besar pengguna, sehingga mereka harus melakukan zoom dan menggeser.

Ganti TODO 3 di index.html dengan tag berikut: 

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

Simpan file. Muat ulang halaman di browser dan periksa halaman dalam mode perangkat. Perhatikan bahwa halaman tidak lagi diperkecil dan skala konten cocok dengan skala di perangkat desktop. Jika konten berperilaku tidak terduga di emulator perangkat, aktifkan dan nonaktifkan mode perangkat untuk meresetnya.

Catatan: Emulasi perangkat memberikan perkiraan yang mendekati tampilan situs Anda di perangkat seluler, tetapi untuk mendapatkan gambaran lengkap, Anda harus selalu menguji situs di perangkat sungguhan. Anda dapat mempelajari lebih lanjut cara men-debug perangkat Android di Chrome dan Firefox.

Penjelasan

Tag meta viewport memberikan petunjuk kepada browser tentang cara mengontrol dimensi dan penskalaan halaman. Properti width mengontrol ukuran area pandang. Nilai ini dapat ditetapkan ke jumlah piksel tertentu (misalnya, width=500) atau ke nilai khusus device-width, yang merupakan lebar layar dalam piksel CSS pada skala 100%. (Ada nilai height dan device-height yang sesuai, yang dapat berguna untuk halaman dengan elemen yang mengubah ukuran atau posisi berdasarkan tinggi area tampilan.)

Properti initial-scale mengontrol tingkat zoom saat halaman pertama kali dimuat. Menetapkan skala awal meningkatkan pengalaman, tetapi konten masih meluap melewati tepi layar. Kami akan memperbaikinya di langkah berikutnya.

Untuk informasi selengkapnya

Ganti TODO 4 di styles/main.css dengan kode berikut:

@media screen and (max-width: 48rem) {
  .container .col {
    width: 95%;
  }
}

Simpan file. Nonaktifkan mode perangkat di browser dan muat ulang halaman. Coba perkecil lebar jendela. Perhatikan bahwa konten beralih ke tata letak satu kolom pada lebar yang ditentukan. Aktifkan kembali mode perangkat dan amati bahwa konten merespons agar sesuai dengan lebar perangkat.

Penjelasan

Untuk memastikan teks dapat dibaca, kita menggunakan kueri media saat lebar browser menjadi 48 rem (768 piksel pada ukuran font default browser atau 48 kali ukuran font default di browser pengguna). Lihat Kapan menggunakan Em vs. Rem untuk penjelasan yang baik tentang alasan rem adalah pilihan yang baik untuk unit relatif. Saat kueri media dipicu, kita mengubah tata letak dari tiga kolom menjadi satu kolom dengan mengubah width dari masing-masing tiga div untuk mengisi halaman.

Flexible Box Layout Module (Flexbox) adalah alat yang berguna dan mudah digunakan untuk membuat konten Anda responsif. Flexbox memungkinkan kita mencapai hasil yang sama seperti pada langkah-langkah sebelumnya, tetapi menangani perhitungan penspasian untuk kita dan menyediakan banyak properti CSS siap pakai untuk menyusun konten.

Memberi komentar pada aturan yang ada di CSS

Beri komentar semua aturan di styles/main.css dengan membungkusnya dalam /* dan */. Kita akan menjadikannya aturan penggantian saat Flexbox tidak didukung di bagian Flexbox sebagai peningkatan progresif.

Menambahkan tata letak Flexbox

Ganti TODO 5.2 di styles/main.css dengan kode berikut:

.container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  background: #eee;  
  overflow: auto;
}

.container .col {
  flex: 1;
  padding: 1rem;
}

Simpan kode dan muat ulang index.html di browser Anda. Nonaktifkan mode perangkat di browser dan muat ulang halaman. Jika Anda mempersempit jendela browser, kolom akan semakin kecil hingga hanya satu kolom yang tetap terlihat. Kita akan memperbaikinya dengan kueri media di latihan berikutnya.

Penjelasan

Aturan pertama menentukan container div sebagai penampung fleksibel. Hal ini memungkinkan konteks fleksibel untuk semua turunan langsungnya. Kami menggabungkan sintaksis lama dan baru untuk menyertakan Flexbox agar mendapatkan dukungan yang lebih luas (lihat Informasi selengkapnya untuk mengetahui detailnya).

Aturan kedua menggunakan class .col untuk membuat turunan flex dengan lebar yang sama. Menetapkan argumen pertama properti flex ke 1 untuk semua div dengan class col akan membagi ruang yang tersisa secara merata di antara keduanya. Hal ini lebih mudah daripada menghitung dan menyetel lebar relatif sendiri.

Untuk informasi selengkapnya

Opsional: Menetapkan lebar relatif yang berbeda

Gunakan nth-child pseudo-class untuk menetapkan lebar relatif dua kolom pertama menjadi 1 dan kolom ketiga menjadi 1,5. Anda harus menggunakan properti flex untuk menetapkan lebar relatif setiap kolom. Misalnya, pemilih untuk kolom pertama akan terlihat seperti ini:

.container .col:nth-child(1)

Menggunakan kueri media dengan Flexbox

Ganti TODO 5.4 di styles/main.css dengan kode di bawah:

@media screen and (max-width: 48rem) {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
  }
}

Simpan kode dan muat ulang index.html di browser Anda. Sekarang, jika Anda memperkecil lebar browser, konten akan disusun ulang menjadi satu kolom.

Penjelasan

Saat kueri media dipicu, kita mengubah tata letak dari tiga kolom menjadi satu kolom dengan menyetel properti flex-flow ke column. Tindakan ini menghasilkan hasil yang sama dengan kueri media yang kita tambahkan di langkah 5. Flexbox menyediakan banyak properti lain seperti flex-flow yang memungkinkan Anda menyusun, mengurutkan ulang, dan menata konten dengan mudah sehingga konten merespons dengan baik dalam konteks apa pun.

Karena Flexbox adalah teknologi yang relatif baru, kita harus menyertakan penggantian dalam CSS.

Menambahkan Modernizr

Modernizr adalah alat deteksi fitur yang menyederhanakan pengujian dukungan Flexbox.

Ganti TODO 6.1 di index.html dengan kode untuk menyertakan build Modernizr kustom:

<script src="modernizr-custom.js"></script>

Penjelasan

Kami menyertakan build Modernizr di bagian atas index.html, yang menguji dukungan Flexbox. Tindakan ini menjalankan pengujian saat halaman dimuat dan menambahkan class flexbox ke elemen <html> jika browser mendukung Flexbox. Jika tidak, class no-flexbox akan ditambahkan ke elemen <html>. Di bagian berikutnya, kita akan menambahkan class ini ke CSS.

Catatan: Jika kita menggunakan properti flex-wrap Flexbox, kita perlu menambahkan detektor Modernizr terpisah hanya untuk fitur ini. Versi lama beberapa browser sebagian mendukung Flexbox, dan tidak menyertakan fitur ini.

Menggunakan Flexbox secara progresif

Mari gunakan class flexbox dan no-flexbox di CSS untuk memberikan aturan penggantian saat Flexbox tidak didukung.

Sekarang di styles/main.css, tambahkan .no-flexbox di depan setiap aturan yang kita komentari:

.no-flexbox .container {
  background: #eee;
  overflow: auto;
}

.no-flexbox .container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

@media screen and (max-width: 48rem) {
  .no-flexbox .container .col {
    width: 95%;
  }
}

Dalam file yang sama, tambahkan .flexbox di depan aturan lainnya:

.flexbox .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #eee;
  overflow: auto;
}

.flexbox .container .col {
  flex: 1;
  padding: 1rem;
}

@media screen and (max-width: 48rem) {
    .flexbox .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-flow: column;
    }
}

Jangan lupa tambahkan .flexbox ke aturan untuk setiap kolom jika Anda menyelesaikan langkah opsional 5.3.

Simpan kode dan muat ulang index.html di browser. Halaman akan terlihat sama seperti sebelumnya, tetapi sekarang berfungsi dengan baik di browser mana pun di perangkat mana pun. Jika Anda memiliki browser yang tidak mendukung Flexbox, Anda dapat menguji aturan penggantian dengan membuka index.html di browser tersebut.

Untuk informasi selengkapnya

Anda telah mempelajari cara menata gaya konten agar responsif. Dengan menggunakan kueri media, Anda dapat mengubah tata letak konten berdasarkan ukuran jendela atau layar perangkat pengguna.

Yang telah kita bahas

  • Menyetel area pandang visual
  • Flexbox
  • Kueri media

Resource

Pelajari lebih lanjut dasar-dasar desain responsif

Mempelajari lebih lanjut Flexbox sebagai peningkatan progresif

Mempelajari library untuk CSS responsif

Pelajari lebih lanjut cara menggunakan kueri media

Untuk melihat semua codelab dalam kursus pelatihan PWA, lihat codelab Selamat datang untuk kursus ini.