نظرة عامة عن التصميم المتجاوب في 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 لضبط الصور بحيث لا تتجاوز عرض عنصرها الأب.۔
إعدادات نافذة العرض
1<meta name="viewport" content="width=device-width, initial-scale=1.0">استخدام علامة <meta> في HTML لضمان أن المتصفح يفسر عرض شاشة الجهاز بشكل صحيح.۔ بدون ذلك، لن يعمل التصميم المتجاوب بشكل صحيح، خاصة على الأجهزة المحمولة.۔
استخدام أطر عمل CSS
غالبًا ما يتم استخدام أطر عمل CSS مثل Bootstrap و Tailwind CSS لتحقيق التصميم المتجاوب بكفاءة.۔ تم تصميم هذه الأطر لإنشاء تخطيطات متجاوبة بسهولة باستخدام فئات محددة مسبقًا.۔
مثال: نظام الشبكة في 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 (حجم متوسط، عادة 768 بكسل أو أكثر)، يتم ترتيب عمودين جنبًا إلى جنب، ولكن على الشاشات الأضيق يتم ترتيبها عموديًا.۔
تخطيط Flexbox والشبكة
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}استخدام CSS flexbox أو grid يسمح بإجراء تعديلات مرنة في التخطيط.۔ هذه التقنيات في التخطيط مناسبة تمامًا للتصميم المتجاوب حيث تسهل التكيف التلقائي للتخطيطات وفقًا لحجم الشاشة.۔
الملخص
التصميم المتجاوب هو طريقة مهمة لضمان أن المستخدمين يمكنهم عرض المواقع بسهولة بغض النظر عن الجهاز الذي يستخدمونه.۔ من خلال الجمع بين استعلامات الوسائط والتخطيطات المرنة والأطر وتقنيات التخطيط الجديدة مثل Flexbox والشبكة، يمكن إنشاء صفحات ويب أكثر مرونة وتكيفًا.۔
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔