`@media` dan Reka Bentuk Responsif
Artikel ini menerangkan tentang @media dan reka bentuk responsif.
Anda akan belajar cara membuat susun atur yang fleksibel melalui sintaks asas dan contoh penggunaan @media.
YouTube Video
HTML untuk Pratonton
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>Peraturan @media
@media ialah peraturan untuk menggunakan pertanyaan media CSS bagi menerapkan gaya berdasarkan syarat tertentu. Ini membolehkan CSS yang berbeza diterapkan mengikut saiz skrin peranti, orientasi, resolusi, atau ciri lain. Digunakan terutamanya untuk reka bentuk responsif, ia membantu menyesuaikan paparan pada pelbagai peranti seperti desktop, tablet, dan mudah alih.
Sintaks Asas
1@media media-type and (condition) {
2 /* Styles applied when the media query is matched */
3}- Dalam
media-type, nyatakan jenis media (contohnya,screen,print). - Dalam
condition, nyatakan syarat seperti saiz skrin atau resolusi.
Jenis Media
- screen: Gaya untuk paparan skrin, seperti pada komputer dan telefon pintar.
- print: Gaya ini digunakan untuk mencetak.
- all: Gaya ini digunakan untuk semua jenis media.
Syarat yang Biasa Digunakan
- min-width / max-width: Terapkan gaya mengikut lebar minimum/maksimum skrin.
- min-height / max-height: Terapkan gaya mengikut ketinggian minimum/maksimum skrin.
- orientation: Nyatakan orientasi skrin (
portraituntuk menegak,landscapeuntuk mendatar). - resolution: Terapkan gaya mengikut resolusi skrin (contohnya, DPI).
Contoh Penggunaan
Perubahan gaya berdasarkan lebar skrin
Sebagai contoh, untuk menyatakan gaya yang diterapkan apabila lebar skrin kurang daripada 600 piksel, anda boleh menulisnya seperti berikut:.
1@media screen and (max-width: 600px) {
2 body {
3 background-color: lightblue;
4 }
5 p {
6 font-size: 14px;
7 }
8}- Pada peranti dengan lebar skrin 600px atau kurang, warna latar belakang berubah menjadi biru muda dan saiz fon perenggan menjadi 14px.
Gaya berdasarkan orientasi skrin
Untuk menerapkan gaya apabila peranti berada dalam orientasi mendatar, anda boleh menulisnya seperti ini:.
1@media screen and (orientation: landscape) {
2 body {
3 background-color: lightgreen;
4 }
5}- Apabila skrin berada dalam mod mendatar, warna latar belakang menjadi hijau muda.
3. Contoh menggabungkan pelbagai syarat
Anda boleh menggabungkan pelbagai syarat dengan and untuk menerapkan gaya kepada syarat yang lebih spesifik.
1@media screen and (min-width: 768px) and (max-width: 1024px) {
2 body {
3 background-color: lightgray;
4 }
5}- Jika lebar skrin berada antara 768px dan 1024px, warna latar belakang akan berubah menjadi kelabu muda.
Contoh Aplikasi: Reka Bentuk 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 reka bentuk responsif, adalah biasa untuk menerapkan susun atur yang berbeza bergantung pada lebar skrin.
- Saiz fon berubah pada peranti mudah alih (600px atau kurang), tablet (601px hingga 1024px), dan desktop (1025px atau lebih).
Ringkasan
@media adalah alat yang berkuasa untuk menukar gaya CSS menurut peranti dan saiz skrin, dan sangat penting untuk reka bentuk responsif. Dengan mahir menggunakan syarat seperti min-width dan max-width, anda boleh mencipta laman web yang dioptimumkan untuk pelbagai peranti.
Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.