`@media` ועיצוב רספונסיבי
מאמר זה מסביר את @media ואת עיצוב רספונסיבי.
תלמדו כיצד ליצור פריסות גמישות דרך הסינטקס הבסיסי ודוגמאות שימוש של @media.
YouTube Video
HTML לתצוגה מקדימה
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>חוקי @media
@media הוא כלל לשימוש בשאילתות מדיה ב-CSS כדי להחיל סגנונות בהתבסס על תנאים מסוימים. זה מאפשר להחיל CSS שונה בהתאם לגודל מסך המכשיר, כיוון, רזולוציה או תכונות אחרות. בעיקר הוא משמש בעיצוב רספונסיבי ועוזר להתאים את המראה במכשירים שונים כמו מחשבים שולחניים, טאבלטים וניידים.
תחביר בסיסי
1@media media-type and (condition) {
2 /* Styles applied when the media query is matched */
3}- ב-
media-type, יש לציין את סוג המדיה (לדוגמה,screen,print). - ב-
condition, יש לציין תנאים כמו גודל מסך או רזולוציה.
סוגי מדיה
- screen: סגנונות לתצוגת מסך, כמו במחשבים ובטלפונים חכמים.
- print: זהו הסגנון שמוחל עבור הדפסה.
- all: זהו הסגנון שמוחל על כל המדיה.
תנאים נפוצים בשימוש
- min-width / max-width: החלת סגנונות לפי רוחב המסך המינימלי/המקסימלי.
- min-height / max-height: החלת סגנונות לפי גובה המסך המינימלי/המקסימלי.
- orientation: לציין את כיוון המסך (
portraitלאנכי,landscapeלאופקי). - resolution: החלת סגנונות לפי רזולוציית המסך (לדוגמה, DPI).
שימוש לדוגמה
שינויי סגנון בהתבסס על רוחב המסך
לדוגמה, כדי לציין סגנונות שיוחלו כאשר רוחב המסך קטן מ-600 פיקסלים, אפשר לכתוב כך:.
1@media screen and (max-width: 600px) {
2 body {
3 background-color: lightblue;
4 }
5 p {
6 font-size: 14px;
7 }
8}- במכשירים עם רוחב מסך של 600 פיקסלים או פחות, צבע הרקע משתנה לכחול בהיר וגודל הגופן של הפסקה הופך ל-14 פיקסלים.
סגנונות המבוססים על כיוון המסך
כדי להחיל סגנונות כאשר המכשיר בכיוון אופקי (landscape), ניתן לכתוב כך:.
1@media screen and (orientation: landscape) {
2 body {
3 background-color: lightgreen;
4 }
5}- כאשר המסך במצב אופקי (landscape), צבע הרקע משתנה לירוק בהיר.
3. דוגמה לשילוב של מספר תנאים
באפשרותך לשלב מספר תנאים עם and כדי להחיל סגנונות על תנאים מסוימים יותר.
1@media screen and (min-width: 768px) and (max-width: 1024px) {
2 body {
3 background-color: lightgray;
4 }
5}- אם רוחב המסך הוא בין 768px ל-1024px, צבע הרקע משתנה לאפור בהיר.
דוגמה ליישום: עיצוב רספונסיבי
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}בעיצוב רספונסיבי, נפוץ להחיל פריסות שונות בהתאם לרוחב המסך.
- גודל הפונטים משתנה בנייד (600px או פחות), בטאבלט (601px עד 1024px), ובמחשב שולחני (1025px או יותר).
סיכום
@media הוא כלי חזק להחלפת סגנונות CSS בהתאם למכשירים ולגדלי מסך, והוא חיוני לעיצוב רספונסיבי. באמצעות שימוש מיומן בתנאים כמו min-width ו-max-width, ניתן ליצור אתר המותאם למכשירים שונים.
תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.