Pada kesempatan kali ini akan memperlihatkan tutorial seputar responsive desain, saya rasa semua teman-teman sudah tau apa itu responsive, lantaran pada dikala ini kalau teman-teman perhatikan ada satu efek yang hilang pada setiap blog atau website yang teman-teman kunjungi, sanggup ditebak efek apa yang hilang.? kalau tidak bisa, saya akan menjewab dan memperlihatkan belakang layar kepada teman-teman satu efek yang sudah hilang pada setiap blog dan website yaitu efek zoom, kalau teman-teman masih ingat beberapa tahun lalu, setiap blog atau website masih memilikit efek zoom dimana efek ini tampil pada dikala sebuah website atau blog di saluran dari perangkat yang lebih kecil ibarat handphone. Bagaimana teman-teman sudah ingatkah.? Jika sudah saya ingin bertanya kepada teman-teman kenapa efek tersebut sanggup hilang?, sambil menunggu teman-teman menjawab saya akan sedikit membahas ihwal sesuatu yang gres pada CSS3 yaitu media query.
Kendala Seorang Desainer Dalam Mendesain Website
Sebelum dirilis CSS3 banyak para desainer website yang resah memikirkan cara biar sebuah layout website mereka mempunyai sifat dan tampilan yang sanggup berubah pada setiap device(perangkat). Pada awalnya seorang desainer mendesain sebuah layout website maka layout tersebut akan berubah kalau di saluran dari perangkat yang berukuran lebih kecil, browser-browser pada perangkat tersebut akan menyesuaikan tampilannya di layar mereka, namun kita mungkin harus melaksanakan zoom sehingga konten sanggup kita baca, dan itu sangat tidak nyaman dan tidak userfriendly. Sehinga semua keresahan para web desainer tersebut kini telah sirna dengan dirilisnya CSS3 yang pada CSS ini mempunyai metode untuk menciptakan website yang responsive dengan memakai Media query.
Mengenal CSS Media Query
Media Query merupakan sebuah teknik CSS layout yang sanggup dipakai oleh desainer untuk sebuah mengatur tampilan dari layout berbeda untuk setiap device (perangkat). Dengan menggunkan media query ini kita sanggup dengan bebas untuk menyeting tampilan dengan CSS di banyak sekali resolusi dan lebar, tinggi daripada browser yang sedang kita gunakan secara spesifik. Lebih gampang dipahamai dengan memakai Media Query ini kita sanggup mengatur sebuah tampilan website berbeda-beda untuk setiap perangkat. Contoh kalau teman-teman menciptakan sebuah website dengan resolusi layar PC dengan backgroundnya berwarna putih maka pada perangkat yang resolusi layar tablet teman-teman sanggup menciptakan backgroundnya berwana biru. Bukan hanya background teman-teman juga sanggup mengubah semuah property yang teman-teman inginkan baik itu lebar,tinggi,warna,padding,margin dll.
Fungsi dari Media Query Dalam CSS3
Seperti yang sudah saya jelaskan diatas, Fungsi dari Media Queries dalam CSS3 ialah mengubah stylesheet menurut lebar & tinggi yang kita tentukan. Ini biasa dilakukan oleh web designer untuk mendesain website responsive di banyak sekali device (perangkat) yang ditentukan ibarat PC, iPhone, Tablet dll. Sehinga teman-teman sanggup menciptakan style terpisah untuk banyak sekali resolusi yang kita inginkan.
Cara Penggunaan CSS Media Query
Dalam penggunaan media query ada dua cara, diantaranya teman-teman sanggup memakai media query dengan metode external atau sanggup memakai metode internal, teladan kedua metode tersebut sanggup dilihat pada code berikut ini.
<head> <!-- CSS @media query media query dengan metode link --> <link rel="stylesheet" media="screen and (min-width: 768px) and (max-width: 991px)" href="tablet.css" /> <link rel="stylesheet" media="screen and (min-width: 480px) and (max-width: 767px)" href="mobile.css" /> <!-- CSS @media query dengan metode style sheet --> <style type="text/css"> @media only screen and (min-width: 480px) and (max-width: 767px) { body { backrpund-color : red; } } </style> </head> Buat teman-teman yang ingin menciptakan media query ini saya sarankan untuk memakai metode external, dimana dengan memakai metode ini teman-teman sanggup dengan gampang menentukan bagaimana sebuah element html ditampilkan. pada teladan diatas kalau teman-teman mau mengubah tampilan website kalau pada resolusi tablet teman-teman tinggal mengubah pada file css pada tablet.css hal yang sama sanggup juga dilakukan untuk mengubah tampilan website pada resolusi mobile (handphone), teman-teman tinggal mengubah pada file css mobile.css dengan demikian lebih gampang dalam mengatur tampilan dari website yang teman-teman buat.
Max-width Dan Min-width
kalau teman-teman perhatikan pada teladan code diatas ada code Max-width dan Min-width tidak puas rasanya kalau belum menjelaskan ihwal max-width dan min-width ini. Adapun max-width dan min-width ini sering dipakai untuk memperlihatkan kondisi ukuran lebar resolusi. Nilai min-width dan max-width akan memberi rentan resolusi kapan layout tersebut dihunakan. Berikut saya berikan teladan untuk penggunaan kondisi max-width dan min-width media queries pada 4 tampilan layout yaitu tampilan layout normal, tablet, mobile dan monitor.
/* normal layout */ body{ ... } /* penggunaan media query pada default tablet layout */ @media only screen and (min-width: 768px) and (max-width: 991px) { body { ... } ... } /* penggunaan media query pada mobile layout */ @media only screen and (min-width: 480px) and (max-width: 767px) { body { ... } ... } /* penggunaan media query pada default monitor layout */ @media only screen and (min-width: 992px) { body { ... } ... } Mengenal Orientation Portrait Dan Landscape
Orientation dipakai untuk memperlihatkan kondisi device orientation apakah landscape atau portrait. Adapun device orientation jarang dipakai sebagian desainer lebih menentukan memakai kondisi max-width / min-width lantaran lebih spesifik dan lebih mudah.
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Penggunaan Meta Viewport
Banya dari teman-teman yang mempunyai hambatan dalam menciptakan media query css, diantaranya sehabis mengatur media query, namun tidak ada perubahan pada tampilan website, sehabis mengirim website pada hosting website tersebut tidak tampil ibarat yang sudah ditentukan pada media querynya. Adapun problem tersebut terjadi lantaran teman-teman tidak memakai meta tag viewport pada file HTML. Jika teman-teman ingin menciptakan sebuah website responsive dengan Media Query saya sarankan untuk memakai Tag meta name=”viewport” dimana meta ini berfungsi membaca resolusi width (lebar), tanpa setting meta viewport media queries tidak berfungsi. Tag ini diletakan pada tag <head>, teladan penulisan tag ini sanggup dilihat pada code dibawah ini.
<meta name="viewport" content="width=device-width, initial-scale=1">
Pada tutorial ini tidak memperlihatkan teladan penerapannya dalam desain website lantaran artikel ini sudah begitu panjang dan lebar. Untuk teladan penerapan nya dalam pembuatan website saya sudah menciptakan sebuah tutorial Cara Paling Praktis Membuat Menu Navigasi Responsive, silahkan teman-teman melihat dan memperhatikan teladan tersebut. Sekian tutorial dari ihwal Mengenal Konsep Media Queries Dalam Desain Responsive Website, semoga sanggup membantu teman-teman dalam menciptakan dan memempelajari website.
No comments:
Post a Comment