The My Project

Beranda

CSS | BAB 9 Responsif Web

 


CSS | BAB 9 Responsif Web
Media Queries
Definisi Media Queries dalam CSS

Media Queries adalah fitur dalam CSS yang memungkinkan Anda untuk menyesuaikan gaya halaman web Anda berdasarkan karakteristik perangkat yang digunakan untuk mengaksesnya.

Karakteristik ini dapat mencakup

  • Ukuran layar : seperti lebar dan tinggi layar
  • Tipe perangkat : seperti desktop, laptop, tablet, dan smartphone
  • Orientasi perangkat : seperti portrait (vertikal) atau landscape (horizontal)
  • Resolusi layar : seperti jumlah piksel per inci
  • Fitur perangkat : seperti kamera, touch screen, dan speaker

    • Dengan menggunakan Media Queries, Anda dapat membuat website yang responsif, yang berarti website Anda akan terlihat dan berfungsi dengan baik di berbagai perangkat dan ukuran layar.

Manfaat Media Queries
  • Meningkatkan user experience: Website yang responsif akan lebih mudah digunakan dan dinavigasi di berbagai perangkat.
  • Meningkatkan SEO: Google dan mesin pencari lainnya menyukai website yang responsif.
  • Menghemat waktu dan biaya: Anda tidak perlu membuat website yang berbeda untuk setiap perangkat.
Contoh Penggunaan Media Queries
  1. Menyembunyikan sidebar di layar kecil : Anda dapat menyembunyikan sidebar di layar smartphone agar website Anda tidak terlihat terlalu sempit.
  2. Mengubah tata letak website : Anda dapat mengubah tata letak website Anda dari dua kolom menjadi satu kolom di layar tablet.
  3. Mengubah ukuran font : Anda dapat memperbesar ukuran font di layar desktop agar lebih mudah dibaca.
Cara Menulis Media Queries

Media Queries ditulis menggunakan at-rule @media. Berikut adalah contoh syntaxnya: 

@media (media_type) {
  /* CSS styles */
}
media_type dapat berupa :
  • all : untuk semua perangkat
  • screen : untuk perangkat dengan layar
  • print : untuk perangkat pencetak
  • handheld : untuk perangkat genggam seperti smartphone
  • only screen and (max-width: 768px) : untuk perangkat dengan lebar layar maksimum 768px
contoh dan studi kasus

Tutorial membuat web responsif menggunakan media queries

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: block;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #3E0F83;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #C79511;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #B98600;
}

.aside {
  background-color: #C79511;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #C79511;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>portofolio</h1>
</div>

<div class="row">
  <div class="col-3 menu">
    <ul>
    <li>about</li>
    <li>skill</li>
    <li>education</li>
    <li>contact</li>
    </ul>
  </div>

  <div class="col-6">
    <h1> tentang sya </h1>
    <p>perkenalkan nama saya Mr. lorem insum, saya ada calon pemprograman handal</p>
  </div>

  <div class="col-3 right">
    <div class="aside">
      <h2>alamat</h2>
      <p>lampung, indonesia.</p>
      <h2>hoby</h2>
      <p>gatau hoby saya apa yg jelas klo megang duit/ punya duuit banyak bawaannya happy.</p>
      <h2>tutor jago</h2>
      <p>motivasi yang tinggi.</p>
    </div>
  </div>
</div>

<div class="footer">
  <p>dibuat oleh owner TheMyProjects</p>
</div>

</body>
</html>

Ketika Anda membuka file HTML ini di browser, sidebar akan disembunyikan pada perangkat dengan lebar layar kurang dari 768px. Pada perangkat dengan lebar layar 769px atau lebih, sidebar akan ditampilkan.

Anda dapat memodifikasi HTML dan CSS ini sesuai dengan kebutuhan Anda. Contohnya, Anda dapat menambahkan lebih banyak konten ke dalam section.content dan aside.sidebar, atau mengubah gaya sidebar dengan CSS.

Berikut adalah beberapa tips tambahan untuk menggunakan media query:
  1. Gunakan media query untuk menyesuaikan tata letak dan gaya website Anda untuk berbagai perangkat dan ukuran layar.
  2. Gunakan media query untuk menampilkan konten yang berbeda kepada pengguna pada perangkat yang berbeda.
  3. Gunakan media query untuk meningkatkan kegunaan dan aksesibilitas website Anda.
Penggunaan unit rem dan em

Memahami Unit rem dan em pada CSS
rem dan em adalah dua unit relatif yang sering digunakan dalam CSS untuk menentukan ukuran elemen. Memahami perbedaan dan cara kerjanya sangat penting untuk membangun desain web yang responsif dan mudah diakses.


Unit rem (root em)
Definisi : Ukuran relatif terhadap ukuran font root element (elemen paling atas dalam halaman web).

Keuntungan :
Membuat desain responsif: Ukuran elemen akan berubah secara proporsional saat mengubah ukuran font browser.
Meningkatkan aksesibilitas: Pengguna dapat mengubah ukuran font browser untuk meningkatkan kenyamanan membaca.

Contoh :
`font-size: 1rem;` - Ukuran font sama dengan ukuran font root element.
`margin: 2rem;` - Margin elemen dua kali lipat dari ukuran font root element.
Unit em
Definisi : Ukuran relatif terhadap ukuran font elemen induknya.

Keuntungan :
Membuat elemen berskala proporsional: Ukuran elemen akan berubah secara proporsional dengan perubahan ukuran font elemen induknya.

Kekurangan :
Kurang ideal untuk desain responsif: Ukuran elemen dihitung berdasarkan elemen induk, sehingga perubahan pada root element tidak berpengaruh.

Contoh :
`font-size: 1em;` - Ukuran font sama dengan ukuran font elemen induknya.
`margin: 2em;` - Margin elemen dua kali lipat dari ukuran font elemen induknya.

Tips:

  1. Gunakan rem untuk:
    Ukuran font dan elemen yang ingin berubah secara proporsional dengan perubahan font browser.
    Meningkatkan aksesibilitas dan desain responsif.
  2. Gunakan em untuk:
    Elemen yang ingin berskala proporsional dengan elemen induknya.
  • Gunakan nilai rem sebagai basis untuk desain web Anda.
  • Gunakan em untuk elemen yang membutuhkan skala proporsional dengan elemen induknya.
  • Hindari penggunaan px (pixel) untuk elemen yang ingin responsif.
Flexbox dan Grid untuk responsif
Flexbox
Konsep Dasar Flexbox
Flexbox CSS memungkinkan kamu untuk membuat sistem layout yang lebih fleksibel dan responsif. Berikut beberapa konsep dasar yang perlu kamu pahami tentang flexbox:

  1. Flex containers

    Flex container adalah elemen dasar dalam flexbox. Saat kamu menetapkan sebuah elemen sebagai flex container ( menggunakan display: flex atau display: inline-flex), semua elemen anak dari elemen tersebut menjadi flex item.

    Flex container membantu mengatur, menyelaraskan, dan menentukan ruang antara berbagai item di dalamnya menggunakan properti flexbox.


  2. Flex items

    Flex item adalah elemen-elemen yang berada di dalam flex container. Salah satu hal unik dari Flexbox adalah kamu memiliki kontrol besar atas bagaimana item ini harus tumbuh, menyusut, dan bagaimana harus diselaraskan terhadap satu sama lain.

    Properti-properti seperti flex-grow, flex-shrink, dan flex-basis bisa dipakai untuk mengontrol ukuran dan ruang yang diambil oleh berbagai item ini.


  3. Main axis and cross axis

    Flexbox bekerja berdasarkan dua sumbu: sumbu utama (main axis) dan sumbu lintang (cross axis).

    Sumbu utama adalah arah di mana flex item diletakkan secara berurutan di dalam container. Sedangkan sumbu lintang adalah sumbu yang tegak lurus terhadap sumbu utama.

    Properti flex-direction dalam flex container akan menentukan arah sumbu utama dan secara tidak langsung juga sumbu lintang. Arah ini bisa vertikal (dalam kolom) atau horizontal (dalam baris).


  4. Penyelarasan (alignment)

    Flexbox menyediakan serangkaian properti untuk memudahkan menyelaraskan item, baik di sumbu utama maupun lintang. Properti seperti align-items, align-self, justify-content, dan align-content memungkinkan kamu mengontrol penyelarasan ini.


  5. Fleksibilitas (Flexibility)

    Flex item bisa diatur agar "tumbuh" atau "menyusut" untuk mengisi ruang yang tersedia di flex container. Artinya, di container yang memiliki ruang ekstra, item dapat diatur untuk memperluas ukurannya. Sementara di container yang terlalu penuh, item bisa diatur untuk menyusut.



Properti Penting dalam Flexbox CSS
Berikut beberapa properti dalam flexbox CSS yang sering digunakan:

  1. Display

    Display adalah titik awal dai flexbox. Dengan menetapkan value flex atau inline-flex pada properti display suatu elemen, kamu mengubahnya menjadi flex container yang berarti elemen anaknya menjadi flex item.
  2. Flex-direction

    Properti ini menentukan arah di mana flex item diletakkan dalam flex container. Kamu bisa memilih row (value default dari flex-direction) untuk layout horizontal atau column untuk layout vertikal.

    Ada juga opsi row-reverse dan column-reverse jika kamu ingin item tersebut ditampilkan dalam urutan terbalik.

  3. justify-content

    Properti justify-content dipakai untuk menentukan bagaimana flex item harus didistribusikan di sepanjang sumbu utama container. Properti ini berguna untuk penyelarasan dan penyeimbangan ruang antar item.

    Value yang bisa diterapkan termasuk flex-start (value default dari justify-content), flex-end, center, space-between, space-around, dan space-evenly.


  4. Align-items

    Jika justify-content bekerja pada main axis, align-items fokus pada cross axis.

    Properti ini berguna untuk mengatur posisi item secara vertikal (atau horizontal, tergantung arah flex). Kamu bisa memilih value seperti flex-start (value default dari align-items), flex-end, center, baseline, atau stretch untuk mengontrol bagaimana item tersebut diselaraskan dan mendistribusikan ruang yang tersedia.


  5. Flex-grow, flex-shrink, dan flex-basis

    Ketiga properti ini bekerja bersama untuk menentukan bagaimana flex item tumbuh dan menyusut relatif terhadap yang lain dalam flex container.

    flex-grow mengontrol bagaimana item memanfaatkan ruang tambahan, flex-shrink menentukan bagaimana item berkurang saat ruang terbatas, dan flex-basis menetapkan ukuran dasar item sebelum mendistribusikan ruang tambahan.


Grid
Dasar-dasar CSS Grid

Sebelum mengetahui cara menggunakan CSS grid, berikut elemen-elemen penting yang perlu kamu ketahui:

  1. Baris (row) dan kolom (column): elemen ini menjadi struktur dasar dari CSS grid. Baris adalah elemen horizontal, sedangkan kolom adalah elemen vertikal. Keduanya bersama-sama membentuk kerangka kerja untuk meletakkan konten.

  2. Garis (line) : garis adalah pembatas antara baris dan kolom. Dengan menentukan nomor garis, kamu bisa menempatkan item di area yang diinginkan.

  3. Sel (cell) : sel adalah ruang antara garis vertikal dan horizontal. Elemen ini berguna sebagai tempat untuk meletakkan konten.

  4. Area : area adalah ruang yang dibentuk dari beberapa sel, memungkinkan kamu untuk mengelompokkan elemen.

  5. Gap : gap adalah jarak antara baris dan kolom, memberikan ruang antar elemen.

  6. Kontainer (container) : container adalah elemen utama yang mengandung grid. Di sini, kamu akan mendefinisikan struktur grid.

  7. Item : item adalah elemen yang ditempatkan di dalam grid.


Cara menggunakan grid pada css

Grid CSS adalah layout system yang memungkinkan Anda untuk mengatur elemen-elemen HTML dengan cara grid (kotak-kotak). Grid CSS menawarkan kontrol yang lebih granular dibandingkan Flexbox dalam hal penempatan elemen.

Berikut adalah langkah-langkah dasar menggunakan Grid CSS :

  1. Mendefinisikan Grid Container
    Tambahkan class ke elemen HTML yang ingin Anda jadikan sebagai grid container. 
    <div class="grid-container">
</div>
  2. Mengaktifkan Grid Layout
    Atur properti `display` elemen container menjadi `grid`. 
    .grid-container {
  display: grid;
}
  3. Mendefinisikan Grid Template
    Grid layout didefinisikan dengan properti `grid-template-columns` dan `grid-template-rows`. Kedua properti ini menentukan jumlah dan ukuran kolom dan baris pada grid.
      Nilai yang dapat digunakan: 
    
 
    auto: Ukuran otomatis berdasarkan konten
     fr : Unit fraksi yang fleksibel
     px : Pixel
     %  : Persen
    grid-template-columns: Mendefinisikan ukuran dan jumlah kolom pada grid.
    Contoh:
     grid-template-columns : 1fr 2fr 1fr; //(membuat 3 kolom dengan ukuran fraksi 1, 2, dan 1)
    grid-template-rows: Mendefinisikan ukuran dan jumlah baris pada grid.
    Contoh: 
     grid-template-rows : repeat(2, 100px); //(membuat 2 baris dengan tinggi 100px)
  4. Menempatkan Elemen pada Grid
    Anda dapat menempatkan elemen-elemen ke dalam grid container dengan menggunakan properti `grid-row` dan `grid-column`.

    grid-row :Menentukan baris tempat elemen berada.
    Contoh: 
    .item { grid-row: 2; } //(menempatkan elemen dengan class "item" pada baris ke-2)
    grid-column : Menentukan kolom tempat elemen berada.
    Contoh: 
    .item { grid-column: span 2; } //(menempatkan elemen dengan class "item" pada 2 kolom)