`@media` dan Desain Responsif
Artikel ini menjelaskan tentang @media dan desain responsif.
Anda akan belajar cara membuat tata letak yang fleksibel melalui sintaks dasar dan contoh penggunaan @media.
YouTube Video
HTML untuk Pratinjau
css-responsive-media.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-responsive-media.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Responsive Design</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>@media</h2>
20 </header>
21 <article>
22 <h3>@media Syntax</h3>
23 <section>
24 <header><h4>CSS</h4></header>
25<pre class="sample">
26@media media-type and (condition) {
27 /* Styles applied when the media query is matched */
28}
29</pre>
30 </section>
31 </article>
32 <article>
33 <h3>@media Example : max-width</h3>
34 <section>
35 <header><h4>CSS</h4></header>
36<pre class="sample">
37@media screen and (max-width: 600px) {
38 body {
39 background-color: lightblue;
40 }
41 p {
42 font-size: 14px;
43 }
44}
45</pre>
46 </section>
47 </article>
48 <article>
49 <h3>@media Example : orientation</h3>
50 <section>
51 <header><h4>CSS</h4></header>
52<pre class="sample">
53@media screen and (orientation: landscape) {
54 body {
55 background-color: lightgreen;
56 }
57}
58</pre>
59 </section>
60 </article>
61 <article>
62 <h3>@media Example : min-width & max-width</h3>
63 <section>
64 <header><h4>CSS</h4></header>
65<pre class="sample">
66@media screen and (min-width: 768px) and (max-width: 1024px) {
67 body {
68 background-color: lightgray;
69 }
70}
71</pre>
72 </section>
73 </article>
74 <article>
75 <h3>@media Example : devices</h3>
76 <section>
77 <header><h4>CSS</h4></header>
78<pre class="sample">
79/* Mobile styles */
80@media screen and (max-width: 600px) {
81 body {
82 font-size: 14px;
83 }
84}
85
86/* Tablet styles */
87@media screen and (min-width: 601px) and (max-width: 1024px) {
88 body {
89 font-size: 16px;
90 }
91}
92
93/* Desktop styles */
94@media screen and (min-width: 1025px) {
95 body {
96 font-size: 18px;
97 }
98}
99</pre>
100 </section>
101 </article>
102 </main>
103</body>
104</html>Aturan @media
@media adalah aturan untuk menggunakan kueri media CSS untuk menerapkan gaya berdasarkan kondisi tertentu. Ini memungkinkan CSS yang berbeda diterapkan sesuai dengan ukuran layar perangkat, orientasi, resolusi, atau karakteristik lainnya. Utamanya digunakan untuk desain responsif, ini membantu menyesuaikan tampilan di berbagai perangkat seperti desktop, tablet, dan ponsel.
Sintaks Dasar
1@media media-type and (condition) {
2 /* Styles applied when the media query is matched */
3}- Dalam
media-type, tentukan jenis media (misalnya,screen,print). - Dalam
condition, tentukan kondisi seperti ukuran layar atau resolusi.
Jenis Media
- screen: Gaya untuk tampilan layar, seperti pada komputer dan ponsel pintar.
- print: Ini adalah gaya yang diterapkan untuk pencetakan.
- all: Ini adalah gaya yang diterapkan untuk semua media.
Kondisi yang Sering Digunakan
- min-width / max-width: Terapkan gaya berdasarkan lebar minimum/maksimum layar.
- min-height / max-height: Terapkan gaya berdasarkan tinggi minimum/maksimum layar.
- orientation: Tentukan orientasi layar (
portraituntuk vertikal,landscapeuntuk horizontal). - resolution: Terapkan gaya berdasarkan resolusi layar (misalnya, DPI).
Contoh Penggunaan
Perubahan gaya berdasarkan lebar layar
Misalnya, untuk menentukan gaya yang diterapkan saat lebar layar kurang dari 600 piksel, Anda dapat menulisnya seperti ini:.
1@media screen and (max-width: 600px) {
2 body {
3 background-color: lightblue;
4 }
5 p {
6 font-size: 14px;
7 }
8}- Pada perangkat dengan lebar layar 600px atau kurang, warna latar belakang berubah menjadi biru muda dan ukuran font paragraf menjadi 14px.
Gaya berdasarkan orientasi layar
Untuk menerapkan gaya saat perangkat dalam orientasi horizontal, Anda dapat menulisnya seperti ini:.
1@media screen and (orientation: landscape) {
2 body {
3 background-color: lightgreen;
4 }
5}- Ketika layar dalam mode horizontal, warna latar belakang berubah menjadi hijau muda.
3. Contoh menggabungkan beberapa kondisi
Anda dapat menggabungkan beberapa kondisi dengan and untuk menerapkan gaya pada kondisi yang lebih spesifik.
1@media screen and (min-width: 768px) and (max-width: 1024px) {
2 body {
3 background-color: lightgray;
4 }
5}- Jika lebar layar berada di antara 768px dan 1024px, warna latar belakang akan berubah menjadi abu-abu terang.
Contoh Aplikasi: Desain Responsif
1/* Mobile styles */
2@media screen and (max-width: 600px) {
3 body {
4 font-size: 14px;
5 }
6}
7
8/* Tablet styles */
9@media screen and (min-width: 601px) and (max-width: 1024px) {
10 body {
11 font-size: 16px;
12 }
13}
14
15/* Desktop styles */
16@media screen and (min-width: 1025px) {
17 body {
18 font-size: 18px;
19 }
20}Dalam desain responsif, umum untuk menerapkan tata letak yang berbeda tergantung pada lebar layar.
- Ukuran huruf berubah pada ponsel (600px atau kurang), tablet (601px hingga 1024px), dan desktop (1025px atau lebih).
Ringkasan
@media adalah alat yang sangat berguna untuk mengubah gaya CSS sesuai dengan perangkat dan ukuran layar, dan sangat penting untuk desain responsif. Dengan memanfaatkan kondisi seperti min-width dan max-width secara terampil, Anda dapat membuat situs web yang dioptimalkan untuk berbagai perangkat.
Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.