Responsive

  1. › 
  2. Responsive

Pengertian Responsive pada halaman web.

Responsive dibahas dalam HTML pada dasarnya lebih berkaitan dengan desain / tampilan halaman web.
Lebih tepatnya bagaimana agar seluruh elemen HTML pada suatu halaman dapat ditampilkan sesuai dengan ukuran layar perangkat.

Hal ini dikarenakan saat ini berbagai macam perangkat dapat mengakses internet untuk membuka halaman web dengan ukuran layar yang berbeda-beda. Sehingga dibutuhkan cara bagaimana agar sebuah halaman web dapat tampil rapi sesuai ukuran layar mulai dari ukuran ponsel hingga yang terbesar , smart tv.

Sebuah halaman web yang dapat menyesuaikan berbagai ukuran layar inilah yang maksud sebagai Responsive.

HTML Responsive Web design

Hal-hal penting membuat halaman web responsive (Responsive Design)

  1. Meta viewport

    2. Menambahkan meta viewport dalam tag <head> halaman. Meta viewport inilah yang berperan untuk menginstruksikan browser bagaimana halaman harus di-skalakan pada ukuran layar tertentu.

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    Dengan meta viewportTanpa meta viewport
  2. Penyusunan dan pengelompokan elemen <body> sesederhana dan seringkas mungkin.
    Gunakan elemen semantik HTML (semantic element) untuk mempermudah seleksi pengaturan style elemen.
    3. <body>
    <header>
    <nav>
    <main>
    <section>
    <time>
    <article>
    <author>
    <aside>
    <footer>
  3. CSS

    4. Peran CSS sangat penting untuk menjadikan halaman web responsive karena dari CSS-lah pengaturan tata letak dapat dikontrol.

  4. Media query
    5. Media query adalah pengaturan dimensi (ukuran height / width) target media dalam CSS.
    Media disini adalah elemen ataupun file konten (image / video / iframe / dokumen) yang membutuhkan pengaturan ukuran khusus agar dapat ditampilkan sesuai dengan ukuran layar (screen) perangkat (ponsel / tablet / laptop / komputer / printer).
    @media (max-width:){}
@media screen (min-width:360px){}
@media only screen (min-width:360px) and (max-width:640px){}
  5. File media (image / video)

Komentar

Posting Komentar