`@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، حدد الشروط مثل حجم الشاشة أو دقتها۔
أنواع الوسائط
- الشاشة: أنماط لعرض الشاشة، مثل أجهزة الكمبيوتر والهواتف الذكية۔
- الطباعة: هذا هو النمط المطبق للطباعة۔
- الكل: هذا هو النمط المطبق على جميع الوسائط۔
الشروط المستخدمة بشكل شائع
- 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 بكسل۔
أنماط بناءً على اتجاه الشاشة
لتطبيق الأنماط عند وجود الجهاز في وضع أفقي، يمكنك كتابتها على النحو التالي:۔
1@media screen and (orientation: landscape) {
2 body {
3 background-color: lightgreen;
4 }
5}- عندما تكون الشاشة في الوضع الأفقي، يصبح لون الخلفية أخضر فاتح۔
3. مثال على الجمع بين شروط متعددة
يمكنك دمج شروط متعددة باستخدام and لتطبيق الأنماط على شروط أكثر تحديدًا۔
1@media screen and (min-width: 768px) and (max-width: 1024px) {
2 body {
3 background-color: lightgray;
4 }
5}- إذا كان عرض الشاشة بين 768 بكسل و 1024 بكسل، يتغير لون الخلفية إلى الرمادي الفاتح۔
مثال للتطبيق: التصميم المتجاوب
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}في التصميم المتجاوب، من الشائع استخدام تخطيطات مختلفة بناءً على عرض الشاشة۔
- تتغير أحجام الخطوط على الأجهزة المحمولة (600 بكسل أو أقل)، الأجهزة اللوحية (601 بكسل إلى 1024 بكسل)، وأجهزة الكمبيوتر (1025 بكسل أو أكثر)۔
الملخص
@media هي أداة قوية لتغيير أنماط CSS بناءً على الأجهزة وأحجام الشاشات، وهي ضرورية للتصميم المتجاوب۔ عند استخدام الشروط مثل min-width و max-width بمهارة، يمكنك إنشاء موقع ويب مخصص لمجموعة متنوعة من الأجهزة۔
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔