banner 728x250

Dasar-Dasar Rancangan Web Responsif Dengan Css

  • Share
banner 468x60
Penggunaan perangkat mobile mirip ponsel pintar untuk menjelajahi web tumbuh dengan segera, akan tetapi sayangnya tidak semua laman web sudah dioptimalkan untuk perangkat mobile. Perangkat mobile seperti ponsel pintar sering terkendala dengan ukuran layar dan membutuhkan pendekatan berlainan dalam bagaimana konten ditampilkan di layar. Terdapat aneka macam ukuran layar yang berlainan untuk smartphone, tablet, desktop, TV, dan bahkan perangkat lainnya. Ukuran layar senantiasa berubah, jadi sangat penting supaya situs web dapat menyesuaikan dengan tiap ukuran layar.
Penggunaan perangkat mobile seperti smartphone untuk menjelajahi web tumbuh dengan cepat Dasar-dasar Desain Web Responsif dengan CSS

Kueri media CSS supaya responsif

Media kueri ialah filter yang sederhana yang dapat diimplementasikan pada style CSS. Media kueri mampu mempermudah dalam mengubah style konten web menurut karakteristik dari perangkat yang merender konten web, termasuk tipe tampian, tinggi, lebar,resolusi dan juga orientasi layar.
  • Pergunakan media kueri dalam mengimplimentasikan style menurut karaktristik perangkat.
  • Pergunakan min-width di atas min-device-width dalam menentukan pengalaman yang terluas bagi pengguna.
  • Pergunakan ukuran yang relatif untuk bagian supaya tidak merusak tata letak atau layout.
Contohnya,kau mampu meletakkan semua style yang dibutuhkan untuk fitur cetak dalam media kueri cetak.
Di samping memakai atribut media di tautan style sheet, terdapat dua cara lain dalam menerapkan media kueri yang mampu disematkan dalam file CSS: @media dan @import. Karena argumentasi kinerja, salah satu dari dua metode pertama tersebut direkomendasikan pada sintaks @import.
@media print 
  /* print style sheets go here */

@import url(print.css) print;
Logika yang berlaku untuk kueri media adalah tidak saling eksklusif, dan untuk setiap filter yang memenuhi tolok ukur tersebut maka blok CSS yang dihasilkan akan dipraktekkan dengan memakai hukum kriteria prioritas sesuai CSS.

Menggunakan kueri media menurut ukuran tampilan

Kueri media dapat memungkinkan kau untuk membuat pengalaman responsif ketika style tertentu diaplikasikan ke layar kecil, layar besar, dan semua layar. Sintaks kueri media memungkinkan untuk pembuatan hukum yang bisa diterapkan tergantung pada karakteristik perangkat.
@media (query) 
  /* CSS Rules used when query matches */
Meskipun terdapat beberapa item berbeda yang bisa dikuerikan, yang paling biasa dab sering dipraktekkan untuk rancangan web responsif yaitu min-width, max-width, min-height, dan max-height.
 Parameter Keterangan 
 max-height Aturan dipraktekkan untuk setiap web browser yang memiliki tinggi lebih kecil dari nilai yang didefinisikan dalam kueri.
 max-width Aturan dipraktekkan untuk setiap web browser yang memiliki lebar lebih kecil dari nilai yang didefinisikan dalam kueri.
 min-height Aturan dipraktekkan untuk setiap web browser yang mempunyai tinggi lebih besar dari nilai yang didefinisikan dalam kueri.
 min-width Aturan diterapkan untuk setiap web browser yang memiliki lebar lebih besar dari nilai yang didefinisikan dalam kueri.
 orientation=landscape Aturan untuk setiap web browser saat lebarnya lebih besar dari tingginya.
 orientation=portrait Aturan dipraktekkan untuk setiap web browser saat tingginya lebih besar dari atau sama dengan lebarnya.
Baca juga:  Kode Java Script Link Sumber Otomatis Ketika Artikel Di Copy-Paste
Contoh :
Penggunaan perangkat mobile seperti smartphone untuk menjelajahi web tumbuh dengan cepat Dasar-dasar Desain Web Responsif dengan CSS




  • Ketika web browser lebarnya antara 0 px dan 640 px, diterapkan max-640px.css.
  • Ketika web browser lebarnya antara 500 px dan 600 px, gaya dalam @media akan dipraktekkan.
  • Ketika web browser lebarnya 640 px atau lebih, dipraktekkan min-640px.css.
  • Ketika web browser lebarnya lebih besar dibandingkan dengan tingginya, diterapkan landscape.css.
  • Ketika web browser tingginya lebih besar ketimbang lebarnya, dipraktekkan portrait.css.

min-device-width

Adalah mungkin juga membuat kueri menurut min-device-width, walaupun praktik ini sangat tidak dianjurkan.
Perbedaannya sungguh kecil namun sangat penting: min-width didasarkan pada ukuran jendela browser sedangkan min-device-width didasarkan pada ukuran layar. Sayangnya beberapa browser, termasuk browser Android usang, tidak melaporkan lebar perangkat dengan benar; browser tersebut melaporkan ukuran layar dalam satuan piksel perangkat, bukan dalam lebar tampilan yang terlihat yang diperlukan.
Selain itu, menggunakan min-device-width bisa menangkal materi diadaptasikan pada desktop atau perangkat lain yang memperbolehkan jendela diubah ukurannya alasannya adalah kueri didasarkan pada ukuran perangkat yang sesungguhnya, bukan ukuran jendela browser.

Gunakan any-pointer dan any-hover

Dimulai dengan Chrome 39, style sheet Anda mampu menulis selektor yang meliputi beberapa tipe pointer dan perilaku arahkan ke atas. Fitur media any-pointer dan any-hover seperti dengan pointer dan hover dalam mengijinkan Anda untuk melakukan kueri kemampuan pointer pengguna. Namun, tidak seperti yang terakhir, any-pointer dan any-hover beroperasi pada campuran dari semua perangkat pointer dan bukan hanya perangkat pointer utama.

Menggunakan unit relatif

Konsep penting di balik desain responsif yakni fluiditas dan proporsionalitas yang bertentangan dengan konsep layout lebar tetap. Menggunakan unit relatif untuk pengukuran mampu menolong menyederhanakan layout dan mencegah kita secara tidak sengaja membuat bagian yang terlalu besar untuk tampilan yang terlihat.
Misalnya, setelan lebar: 100% pada div tingkat atas, memutuskan bahwa itu membentang mencakup lebar performa yang tampakdan tidak terlalu besar atau terlalu kecil untuk performa yang terlihat. div akan cocok, tidak peduli apakah itu iPhone berlebar 320 px, Blackberry Z10 berlebar 342 px, atau suatu Nexus 5 yang berlebar 360 px.
Selain itu, memakai unit relatif memungkinkan browser untuk merender materi berdasarkan tingkat zoom pengguna tanpa perlu menambahkan bilah gulir horizontal ke laman.
Tidak direkomendasikan (Lebar tetap)
div.fullWidth 
  width: 320px;
  margin-left: auto;
  margin-right: auto;
Disarankan (Lebar responsif)
div.fullWidth 
  width: 100%;

Memilih breakpoint

Jangan mendefinisikan breakpoint berdasarkan kelas perangkat. Mendefinisikan breakpoint berdasarkan perangkat, produk, nama merek, atau metode operasi tertentu yang digunakan ketika ini bisa menyebabkan mimpi buruk dalam pemeliharaan. Malahan, materi itu sendiri yang harus menentukan bagaimana layout menyesuaikan dengan kontainer.
Buat breakpoint menurut materi, jangan pernah menurut perangkat, produk, atau merek tertentu.
Desainlah untuk perangkat seluler terkecil lebih dahulu; lalu secara progresif memajukan pengalaman pengguna seiring bertambahnya properti layar.
Jaga jumlah maksimum baris teks sekitar 70 atau 80 abjad.
Memilih breakpoint utama dengan secara bertahap mulai dari layar kecil sampai ke besar.
Desain materi supaya pas dengan ukuran layar kecil apalagi dahulu, lalu perluas layar hingga breakpoint menjadi diperlukan. Ini memungkinkan Anda untuk memaksimalkan breakpoint berdasarkan materi dan mempertahankan jumlah breakpoint sesedikit mungkin.
Penggunaan perangkat mobile seperti smartphone untuk menjelajahi web tumbuh dengan cepat Dasar-dasar Desain Web Responsif dengan CSS
Mari kita bekerja lewat contoh yang kita lihat di awal: prakiraan cuaca. Langkah pertama yaitu menciptakan prakiraan terlihat cantik di layar kecil.
Berikutnya, ubah ukuran browser sampai ada terlampau banyak ruang putih antara komponen, dan penampilan prakiraan cuaca tampaktidak elok. Keputusan ini sedikit subjektif, tetapi di atas 600px niscaya terlalu lebar.
Penggunaan perangkat mobile seperti smartphone untuk menjelajahi web tumbuh dengan cepat Dasar-dasar Desain Web Responsif dengan CSS
Untuk memasukkan breakpoint pada 600 px, buat dua style sheet baru, satu untuk dipakai ketika browser 600 px dan kurang dari itu, dan satu ketika luasnya lebih dari 600 px.


Yang terakhir, optimalisasi CSS. Dalam acuan ini, kami telah menempatkan gaya umum mirip font, ikon, pemosisian dasar, dan warna di weather.css. Layout tertentu untuk layar kecil lalu ditempatkan di weather-small.css, dan versi layar besar ditempatkan di weather-large.css.
#developers.google.com
banner 336x280
banner 120x600
  • Share