`@media` at Tumutugong Disenyo
Ipinaliliwanag ng artikulong ito ang @media at tumutugong disenyo.
Matututuhan mo kung paano lumikha ng mga flexible na layout gamit ang pangunahing syntax at mga halimbawa ng paggamit ng @media.
YouTube Video
HTML para sa Preview
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>Mga Panuntunan ng @media
Ang @media ay isang panuntunan para sa paggamit ng CSS media queries upang mag-apply ng mga style batay sa partikular na mga kondisyon. Pinapahintulutan nito ang iba't ibang CSS na ma-apply ayon sa laki ng screen ng device, orientation, resolution, o iba pang mga katangian. Pangunahing ginagamit para sa responsive design, ito ay tumutulong na i-adjust ang hitsura sa iba't ibang device tulad ng desktops, tablets, at mobiles.
Pangunahing Syntax
1@media media-type and (condition) {
2 /* Styles applied when the media query is matched */
3}- Sa
media-type, tukuyin ang uri ng media (hal.,screen,print). - Sa
condition, tukuyin ang mga kondisyon tulad ng laki ng screen o resolution.
Mga Uri ng Media
- screen: Mga estilo para sa pagpapakita sa screen, tulad ng sa mga computer at smartphone.
- print: Ito ang estilo na inilalapat para sa pagpi-print.
- all: Ito ang estilo na inilalapat sa lahat ng uri ng media.
Kadalasang Ginagamit na mga Kondisyon
- min-width / max-width: Mag-apply ng mga style ayon sa minimum/maximum na lapad ng screen.
- min-height / max-height: Mag-apply ng mga style ayon sa minimum/maximum na taas ng screen.
- orientation: Tukuyin ang orientation ng screen (
portraitpara sa patayo,landscapepara sa pahalang). - resolution: Mag-apply ng mga style batay sa resolution ng screen (hal., DPI).
Halimbawa ng Paggamit
Pagbabago ng style batay sa lapad ng screen
Halimbawa, upang tukuyin ang mga style na na-aapply kapag ang lapad ng screen ay mas mababa sa 600 pixels, maaari mo itong isulat nang ganito:.
1@media screen and (max-width: 600px) {
2 body {
3 background-color: lightblue;
4 }
5 p {
6 font-size: 14px;
7 }
8}- Sa mga device na may lapad ng screen na 600px o mas mababa, nagiging light blue ang kulay ng background at nagiging 14px ang sukat ng font ng talata.
Mga style batay sa orientation ng screen
Upang mag-apply ng mga style kapag ang device ay nasa landscape orientation, maaari mo itong isulat nang ganito:.
1@media screen and (orientation: landscape) {
2 body {
3 background-color: lightgreen;
4 }
5}- Kapag ang screen ay nasa landscape mode, nagiging light green ang kulay ng background.
3. Halimbawa ng pagsasama-sama ng maraming kondisyon
Maaari mong pagsamahin ang maraming kondisyon gamit ang and upang mag-apply ng mga estilo sa mas tiyak na mga kondisyon.
1@media screen and (min-width: 768px) and (max-width: 1024px) {
2 body {
3 background-color: lightgray;
4 }
5}- Kung ang lapad ng screen ay nasa pagitan ng 768px at 1024px, ang kulay ng background ay nagiging light gray.
Halimbawa ng Aplikasyon: Responsive Design
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}Sa responsive design, karaniwan ang paglalapat ng iba't ibang layout depende sa lapad ng screen.
- Nagbabago ang mga font size sa mobile (600px pababa), tablet (601px hanggang 1024px), at desktop (1025px pataas).
Buod
Ang @media ay isang makapangyarihang tool para sa pagpapalit ng mga estilo ng CSS ayon sa mga device at laki ng screen, at mahalaga para sa responsive design. Sa pamamagitan ng mahusay na paggamit ng mga kondisyon tulad ng min-width at max-width, makakalikha ka ng website na na-optimize para sa iba't ibang device.
Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.