סקירה כללית על עיצוב רספונסיבי ב-CSS
מאמר זה מסביר את הסקירה של עיצוב רספונסיבי ב-CSS.
נספק סקירה של הרעיון הבסיסי של עיצוב רספונסיבי ואת התפקיד של CSS ביישום שלו.
YouTube Video
HTML לתצוגה מקדימה
css-responsive-overview.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-overview.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>Responsive Design Related Properties</h2>
20 </header>
21 <article>
22 <h3>Media Queries</h3>
23 <section>
24 <header><h4>CSS</h4></header>
25<pre class="sample">
26/* When the screen width is 600px or less */
27@media (max-width: 600px) {
28 body {
29 background-color: lightblue;
30 }
31}
32/* When the screen width is between 601px and 1200px */
33@media (min-width: 601px) and (max-width: 1200px) {
34 body {
35 background-color: lightgreen;
36 }
37}
38/* When the screen width is 1201px or more */
39@media (min-width: 1201px) {
40 body {
41 background-color: lightyellow;
42 }
43}
44</pre>
45 </section>
46 </article>
47 <article>
48 <h3>Fluid Layouts</h3>
49 <section>
50 <header><h4>CSS</h4></header>
51<pre class="sample">
52.container {
53 width: 80%; /* 80% width relative to the parent element */
54 margin: 0 auto; /* Center the element */
55}
56</pre>
57 </section>
58 </article>
59 <article>
60 <h3>Responsive Images</h3>
61 <section>
62 <header><h4>CSS</h4></header>
63<pre class="sample">
64img {
65 max-width: 100%;
66 height: auto;
67}
68</pre>
69 </section>
70 </article>
71 <article>
72 <h3>Viewport</h3>
73 <section>
74 <header><h4>HTML</h4></header>
75 <pre><meta name="viewport" content="width=device-width, initial-scale=1.0"></pre>
76 </section>
77 </article>
78 <article>
79 <h3>CSS Frameworks</h3>
80 <section>
81 <header><h4>HTML</h4></header>
82<pre>
83<div class="container">
84 <div class="row">
85 <div class="col-md-6">Left content</div>
86 <div class="col-md-6">Right content</div>
87 </div>
88</div>
89</pre>
90 </section>
91 </article>
92 <article>
93 <h3>Flexbox & Grid Layout</h3>
94 <section>
95 <header><h4>CSS</h4></header>
96<pre class="sample">
97/* Flex Example */
98.container {
99 display: flex;
100 flex-wrap: wrap; /* Allow elements to wrap */
101}
102
103.item {
104 flex: 1 1 200px; /* Each item has a minimum width of 200px */
105}
106
107/* Grid Example */
108.container {
109 display: grid;
110 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
111 gap: 16px;
112}
113</pre>
114 </section>
115 </article>
116 </main>
117</body>
118</html>סקירה כללית על עיצוב רספונסיבי ב-CSS
ב-CSS, עיצוב רספונסיבי הוא טכניקה להצגת פריסת העמוד והתוכן של דף אינטרנט בצורה מותאמת במגוון מכשירים וגדלי מסכים, כגון סמארטפונים, טאבלטים ומחשבים שולחניים. כדי להשיג עיצוב רספונסיבי, בעיקר נעשה שימוש בטכניקות ובשיטות הבאות.
שאילתות מדיה
1/* When the screen width is 600px or less */
2@media (max-width: 600px) {
3 body {
4 background-color: lightblue;
5 }
6}
7/* When the screen width is between 601px and 1200px */
8@media (min-width: 601px) and (max-width: 1200px) {
9 body {
10 background-color: lightgreen;
11 }
12}
13/* When the screen width is 1201px or more */
14@media (min-width: 1201px) {
15 body {
16 background-color: lightyellow;
17 }
18}שאילתות מדיה הן תכונה המאפשרת ליישם חוקים שונים של CSS בהתאם לרוחב המכשיר, גובהו, הרזולוציה ועוד. תכונה זו מאפשרת ליישם סגנונות שונים בהתאם לגודל המסך.
בדוגמה זו, צבע הרקע משתנה בהתאם לרוחב המסך.
פריסות גמישות
1.container {
2 width: 80%; /* 80% width relative to the parent element */
3 margin: 0 auto; /* Center the element */
4}בעיצוב רספונסיבי, רוחב וגובה האלמנטים מוגדרים באמצעות יחידות יחסיות כמו אחוזים או em במקום באמצעות ערכי פיקסלים מוחלטים. כך הפריסה יכולה להשתנות בצורה גמישה לפי גודל המסך.
תמונות רספונסיביות
1img {
2 max-width: 100%;
3 height: auto;
4}גם תמונות מוגדרות להתאים את גודלן לפי גודל המסך. לדוגמה, שימוש ב-max-width יכול להתאים את גודל התמונות כך שלא יחרגו מרוחב האלמנט האב.
הגדרות חלון צפייה (Viewport)
1<meta name="viewport" content="width=device-width, initial-scale=1.0">השתמשו בתג <meta> ב-HTML כדי לוודא שהדפדפן מפרש נכון את רוחב המסך של המכשיר. ללא הגדרה זו, עיצוב רספונסיבי לא יפעל בצורה תקינה, במיוחד במכשירים ניידים.
שימוש בפריימוורקים של CSS
פריימוורקים של CSS כמו Bootstrap ו-Tailwind CSS משמשים לעיתים קרובות להשגת עיצוב רספונסיבי באופן יעיל. פריימוורקים אלה נועדו ליצירת פריסות רספונסיביות בקלות באמצעות מחלקות מוגדרות מראש.
דוגמה: מערכת הרשת (Grid System) של Bootstrap
1<div class="container">
2 <div class="row">
3 <div class="col-md-6">Left content</div>
4 <div class="col-md-6">Right content</div>
5 </div>
6</div>בדוגמה לעיל, כאשר רוחב המסך הוא md (גודל בינוני, בדרך כלל 768px או יותר), שני עמודות מסודרות זו לצד זו, אך על מסכים צרים יותר, הן מסודרות אנכית.
עיצוב באמצעות Flexbox ו-Grid
1/* Flex Example */
2.container {
3 display: flex;
4 flex-wrap: wrap; /* Allow elements to wrap */
5}
6
7.item {
8 flex: 1 1 200px; /* Each item has a minimum width of 200px */
9}
10
11/* Grid Example */
12.container {
13 display: grid;
14 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
15 gap: 16px;
16}שימוש ב-flexbox או grid ב-CSS מאפשר התאמות עיצוב גמישות. טכניקות עיצוב אלו מתאימות במיוחד לעיצוב תגובתי, מכיוון שהן מקלות על התאמת העיצוב באופן אוטומטי בהתאם לגודל המסך.
סיכום
עיצוב תגובתי הוא שיטה חשובה להבטיח שמשתמשים יוכלו לצפות באתרים בנוחות ללא קשר למכשיר שבו הם משתמשים. על ידי שילוב של מדיה שאילתות, עיצובים גמישים, מסגרות וטכניקות עיצוב חדשות כמו Flexbox ו-Grid, ניתן ליצור דפי אינטרנט גמישים ומתאימים יותר.
תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.