ديناس منصة تعليمية عربية
كثيرًا ما يبدأ المبتدئ في تصميم موقع ويب ويشعر بالرضا التام عن النتيجة على شاشة الحاسوب، ثم يُفاجأ عند فتح الموقع على الهاتف بأن كل شيء يبدو غير منظم. النصوص كبيرة أو صغيرة أكثر من اللازم، العناصر متراكبة، وبعض الأقسام تخرج عن الشاشة. في هذه اللحظة يظهر سؤال مهم: كيف أجعل التصميم يتكيّف مع كل الشاشات؟
هنا بالضبط تظهر Media Queries. هذه الخاصية في CSS هي الأداة التي تسمح لك بأن تقول للمتصفح: إذا كان حجم الشاشة بهذا الشكل، طبّق هذه القواعد، وإذا تغيّر الحجم، غيّر السلوك. الفكرة قد تبدو مخيفة في البداية، خاصة لمن تعوّد على كتابة CSS بشكل ثابت، لكن في الواقع هي أبسط مما تتخيل.
المشكلة عند كثير من المبتدئين ليست في Media Queries نفسها، بل في طريقة تقديمها. غالبًا ما يتم شرحها كأكواد شرطية معقّدة، دون ربطها بالمشكلة الحقيقية التي تحلّها. لهذا يشعر المبتدئ أنه يحفظ الصيغة دون أن يفهم متى ولماذا يستخدمها.
هذا المقال مخصص للمبتدئين تحديدًا. سنفهم Media Queries خطوة بخطوة، بلغة بسيطة، ومن خلال أمثلة قريبة من الواقع. لن نبدأ بالأكواد مباشرة، بل بالفكرة نفسها، حتى يصبح ما تكتبه لاحقًا منطقيًا وسهل التذكر.
مع التقدم في الفصول، ستلاحظ أن Media Queries ليست شيئًا إضافيًا معقدًا، بل أداة طبيعية تجعل CSS أكثر ذكاءً. وعندما تفهمها جيدًا، ستصبح جزءًا أساسيًا من أي تصميم تكتبه، دون خوف أو تردد.
ما هي Media Queries بلغة بسيطة
لفهم Media Queries بشكل بسيط، تخيّل أنك تعطي المتصفح مجموعة تعليمات، لكنك تطلب منه ألا يطبقها دائمًا، بل فقط عندما تتحقق شروط معينة. هذه الشروط غالبًا ما تكون مرتبطة بحجم الشاشة، مثل العرض أو الارتفاع، لكنها في الجوهر مجرد أسئلة يطرحها CSS قبل تطبيق التنسيقات.
بمعنى آخر، Media Queries تسمح لـ CSS بأن يسأل: هل عرض الشاشة أصغر من قيمة معينة؟ هل هو أكبر؟ إذا كانت الإجابة نعم، يتم تطبيق القواعد الموجودة داخل Media Query، وإذا كانت لا، يتم تجاهلها تمامًا. هذا السلوك هو ما يجعل التصميم يتغير حسب الجهاز.
نحن نحتاج Media Queries لأن التصميم الثابت لا يناسب كل الشاشات. ما يبدو مريحًا على شاشة كبيرة قد يكون غير قابل للاستخدام على شاشة صغيرة. بدل إنشاء موقع منفصل للهاتف، نستخدم Media Queries لتكييف نفس الصفحة مع ظروف مختلفة.
لتقريب الفكرة أكثر، يمكن تشبيه Media Queries بإشارات المرور. الإشارة لا تعمل طوال الوقت بنفس اللون، بل تتغير حسب الحالة. كذلك Media Queries، لا تُفعّل القواعد إلا عندما تكون الشروط مناسبة.
الأمر المهم الذي يجب أن يفهمه المبتدئ هو أن Media Queries لا تغيّر محتوى الصفحة، بل تغيّر طريقة عرضه فقط. العناصر نفسها تبقى موجودة، لكن شكلها، حجمها، أو ترتيبها يتغير ليصبح مناسبًا للشاشة.
بعد فهم هذه الفكرة الأساسية، يصبح من السهل الانتقال إلى كيفية عمل Media Queries فعليًا داخل CSS، وما الذي يحدث عندما تتحقق الشروط أو لا تتحقق، وهو ما سنوضحه في الفصل القادم.
كيف تعمل Media Queries فعليًا
بعد أن فهمنا فكرة Media Queries بشكل عام، ننتقل الآن إلى كيفية عملها فعليًا داخل CSS، لكن بدون تعقيد. Media Query هي ببساطة شرط. هذا الشرط يُخبر المتصفح متى يجب أن يطبق مجموعة معينة من القواعد ومتى يتجاهلها.
عندما يقرأ المتصفح ملف CSS، فإنه يمر على القواعد واحدة تلو الأخرى. إذا صادف Media Query، فإنه لا يطبق ما بداخلها مباشرة، بل يتحقق أولًا من الشرط المكتوب. إذا كان الشرط صحيحًا، يتم تفعيل القواعد، وإذا لم يكن كذلك، يتم تجاوزها وكأنها غير موجودة.
أكثر شرطين ستراهما كمبتدئ هما max-width و min-width. الأول يعني أن القواعد تُطبق عندما يكون عرض الشاشة أصغر أو يساوي قيمة معينة، بينما الثاني يعني أن القواعد تُطبق عندما يكون العرض أكبر أو يساوي قيمة معينة.
لفهم الفرق بينهما، تخيّل أنك تقول: عندما تصبح الشاشة ضيقة، غيّر شكل التصميم. هذا التفكير يتماشى مع max-width. أما إذا قلت: عندما تصبح الشاشة واسعة، أضف تنسيقات إضافية، فهذا يتماشى مع min-width.
لنأخذ مثالًا بسيطًا يوضح الفكرة:
<!--
@media (max-width: 600px) {
body {
background-color: #f2f2f2;
}
}
-->
في هذا المثال، لون الخلفية سيتغير فقط عندما يكون عرض الشاشة 600 بكسل أو أقل. إذا كبرت الشاشة عن ذلك، يعود المتصفح إلى القواعد العادية خارج Media Query.
نقطة مهمة للمبتدئ هي أن Media Queries لا “تستبدل” CSS، بل تضيف عليه شروطًا. القواعد الأساسية تُكتب أولًا، ثم تأتي Media Queries لتعديل السلوك عند الحاجة. هذا الأسلوب يجعل الكود أوضح وأسهل في الفهم.
بعد استيعاب طريقة العمل هذه، يصبح من المفيد كتابة أول Media Query بنفسك وفهم بنيتها خطوة بخطوة، وهو ما سنفعله في الفصل القادم.
أول Media Query في حياتك
في هذا الفصل، سنكتب أول Media Query بشكل مبسّط جدًا، دون تعقيد أو تفاصيل زائدة. الهدف هنا ليس الإبداع في التصميم، بل فهم البنية الأساسية وكيف تُكتب، حتى تصبح مألوفة عندك.
أي Media Query تتكون من جزأين رئيسيين: الكلمة @media، ثم الشرط الذي نريد التحقق منه. بعد ذلك، نضع بداخلها القواعد التي نريد تطبيقها عندما يتحقق هذا الشرط.
الصيغة العامة تبدو كالتالي:
<!--
@media (شرط) {
/* القواعد التي تُطبق عند تحقق الشرط */
}
-->
لنحوّل هذه الصيغة إلى مثال عملي بسيط. تخيّل أنك تريد تغيير حجم النص عندما تكون الشاشة صغيرة:
<!--
p {
font-size: 18px;
}
@media (max-width: 768px) {
p {
font-size: 16px;
}
}
-->
في هذا المثال، النص يكون بحجم عادي على الشاشات الكبيرة. وعندما يصبح عرض الشاشة 768 بكسل أو أقل، يتم تصغير حجم النص ليصبح أكثر ملاءمة للشاشات الصغيرة.
من الأخطاء الشائعة عند المبتدئين نسيان الأقواس، أو كتابة القواعد خارج Media Query. من المهم التأكد أن كل القواعد الخاصة بالشرط تكون داخل الأقواس، وإلا فلن تعمل كما هو متوقع.
أيضًا، لا تحتاج إلى كتابة Media Query لكل عنصر. في البداية، ركّز على الحالات الواضحة فقط، مثل تغيير تخطيط عام أو حجم نص، ثم توسّع تدريجيًا مع زيادة فهمك.
بعد كتابة أول Media Query، يبدأ السؤال التالي بالظهور: على أي مقاسات نكتب هذه الشروط؟ هل نختار مقاسات أجهزة معينة؟ هذا ما سنناقشه بطريقة مبسطة في الفصل القادم.
التعامل مع أحجام الشاشات للمبتدئين
من أكثر الأمور التي تُربك المبتدئ عند استخدام Media Queries هو سؤال المقاسات. كثيرون يبحثون عن قائمة جاهزة: مقاس الهاتف، مقاس التابلت، مقاس الحاسوب… ثم يحاولون الحفظ والتطبيق حرفيًا. المشكلة أن هذا الأسلوب لا يعكس الطريقة الصحيحة للتفكير في التصميم المتجاوب.
الحقيقة أن التصميم المتجاوب لا يعتمد على أسماء الأجهزة، بل على المساحة المتاحة لعرض المحتوى. الأجهزة تتغير باستمرار، وأحجام الشاشات تتنوع بشكل كبير، لذلك ربط التصميم بأجهزة محددة يجعله هشًا وغير مستعد للمستقبل.
الطريقة الأبسط للمبتدئ هي مراقبة متى يبدأ التصميم في “الانكسار”. عندما تصغّر نافذة المتصفح وتلاحظ أن النص أصبح ضيقًا، أو العناصر تراكبت، فهذه نقطة مناسبة لكتابة Media Query. هذه النقطة تُسمّى Breakpoint، وهي ليست رقمًا سحريًا، بل نتيجة لملاحظة حقيقية.
بدل أن تقول: هذا Media Query للهاتف، قل: هنا التصميم لم يعد مريحًا. هذا التغيير البسيط في التفكير يجعل اختيار المقاسات منطقيًا وأسهل بكثير، ويجنبك الحفظ دون فهم.
في البداية، يكفي استخدام نقاط توقف عامة، مثل شاشة صغيرة، شاشة متوسطة، وشاشة كبيرة. ومع الخبرة، ستصبح قادرًا على تحديد هذه النقاط بدقة حسب المحتوى الذي تعمل عليه.
بعد أن فهمنا كيف نختار المقاسات بطريقة صحيحة، ننتقل إلى كيفية استخدام Media Queries لتغيير التخطيط نفسه، وليس فقط الأحجام، وهو ما سنناقشه في الفصل القادم.
Media Queries مع التخطيط
بعد أن تعرّفنا على فكرة المقاسات ونقاط التوقف، نصل الآن إلى الاستخدام الأكثر أهمية لـ Media Queries، وهو تغيير التخطيط نفسه. هنا تبدأ Media Queries في إظهار قوتها الحقيقية، لأن الهدف ليس فقط تصغير النص أو تكبيره، بل إعادة ترتيب المحتوى ليبقى واضحًا ومريحًا.
على الشاشات الكبيرة، يكون من الطبيعي وضع العناصر بجانب بعضها البعض، مثل قسم المحتوى وقسم جانبي. لكن عند الانتقال إلى شاشة صغيرة، يصبح هذا الترتيب غير مناسب، لأن المساحة الأفقية لم تعد كافية. في هذه الحالة، نحتاج إلى تغيير التخطيط من أفقي إلى عمودي.
Media Queries تسمح لك بإجراء هذا التغيير بسهولة. يمكنك جعل العناصر تظهر في صف واحد على الشاشات الواسعة، ثم تتحول إلى أعمدة متتالية على الشاشات الصغيرة، دون تغيير بنية HTML نفسها.
لنأخذ مثالًا مبسّطًا يوضح الفكرة:
<!--
.layout {
display: flex;
}
.sidebar {
width: 30%;
}
.content {
width: 70%;
}
@media (max-width: 768px) {
.layout {
flex-direction: column;
}
.sidebar,
.content {
width: 100%;
}
}
-->
في هذا المثال، التخطيط يكون أفقيًا على الشاشات الكبيرة. وعندما تصبح الشاشة صغيرة، تتحول العناصر إلى تخطيط عمودي، بحيث يأخذ كل عنصر العرض الكامل. هذا التغيير يجعل القراءة أسهل والتفاعل أكثر راحة على الهاتف.
المهم هنا هو عدم المبالغة في تغيير التخطيط. إذا كان التخطيط يعمل بشكل مقبول على شاشة معينة، فلا داعي لتغييره فقط لأن المقاس تغيّر. Media Queries تُستخدم عند الحاجة الفعلية، لا كعادة.
بعد التعامل مع التخطيط العام، ننتقل إلى عناصر أدق مثل النصوص والصور، وكيف يمكن لـ Media Queries أن تساعد في تحسين عرضها على الشاشات الصغيرة، وهو ما سنناقشه في الفصل القادم.
Media Queries مع النصوص والصور
بعد ضبط التخطيط العام باستخدام Media Queries، يأتي دور التفاصيل التي تصنع الفرق الحقيقي في تجربة المستخدم، وهي النصوص والصور. هذه العناصر قد تبدو بسيطة، لكنها أكثر ما يتأثر بتغيّر حجم الشاشة، خصوصًا على الهواتف.
النصوص على الشاشات الكبيرة تكون مريحة حتى بأحجام أكبر، لكن عند تصغير الشاشة قد يصبح النص كبيرًا أكثر من اللازم، أو العكس، صغيرًا ويصعب قراءته. هنا تساعد Media Queries في تعديل حجم الخط بشكل بسيط دون المساس بباقي التصميم.
مثال مبسّط على تغيير حجم النص:
<!--
body {
font-size: 18px;
}
@media (max-width: 600px) {
body {
font-size: 16px;
}
}
-->
بهذا الأسلوب، يبقى النص مريحًا على الشاشات الكبيرة، ويصبح أخف وأسهل قراءة على الشاشات الصغيرة، دون الحاجة إلى تعقيد أو حسابات إضافية.
أما الصور، فالمشكلة الشائعة هي أن الصورة تكون بعرض ثابت، فتخرج عن حدود الشاشة على الهاتف. الحل الأساسي هو جعل الصور مرنة، بحيث لا تتجاوز عرض الحاوية التي توجد داخلها.
يمكن الجمع بين المرونة و Media Queries عند الحاجة:
<!--
img {
max-width: 100%;
height: auto;
}
@media (max-width: 600px) {
.hero-image {
display: none;
}
}
-->
في هذا المثال، الصورة تبقى مرنة في كل الأحجام، لكن يتم إخفاء صورة كبيرة وغير ضرورية على الشاشات الصغيرة لتخفيف الحمل وتحسين تجربة المستخدم. هذا الأسلوب شائع ومفيد عندما يكون المحتوى أهم من الزخرفة.
المهم للمبتدئ هو عدم المبالغة. لا تحتاج إلى Media Query لكل نص أو صورة. ركّز فقط على الحالات التي تؤثر فعليًا على القراءة أو الاستخدام، ومع الوقت ستتعلم تمييز هذه الحالات بسهولة.
بعد التعامل مع النصوص والصور، يبقى الحديث عن الأخطاء التي يقع فيها المبتدئون عند استخدام Media Queries، لأن معرفتها توفر عليك وقتًا كبيرًا وتجنبك الإحباط، وهو ما سنناقشه في الفصل القادم.
أخطاء شائعة عند المبتدئين في Media Queries
عند تعلم Media Queries لأول مرة، من الطبيعي الوقوع في أخطاء، لأن الفكرة جديدة وطريقة التفكير مختلفة عن كتابة CSS ثابتة. المشكلة ليست في الوقوع في الخطأ، بل في تكراره دون فهم سببه. معرفة هذه الأخطاء مبكرًا تختصر عليك وقتًا طويلًا من التجربة والإحباط.
أحد أكثر الأخطاء شيوعًا هو كتابة عدد كبير من Media Queries لمعالجة مشاكل صغيرة. بدل التفكير في تصميم مرن من البداية، يتم اللجوء إلى Media Query عند كل خلل بسيط، مما يؤدي إلى ملف CSS مزدحم يصعب فهمه أو تعديله لاحقًا.
خطأ آخر هو الاعتماد على النسخ واللصق دون فهم. كثير من المبتدئين ينسخون Media Queries جاهزة من الإنترنت بمقاسات محددة، ثم يستخدمونها كما هي، دون معرفة لماذا اختير هذا الرقم أو ماذا يحدث عند تغييره. هذا الأسلوب يجعل التعلم سطحيًا ويؤدي إلى مشاكل عند أي تعديل.
من الأخطاء المنتشرة أيضًا تصميم الموقع للحاسوب أولًا، ثم محاولة “إصلاحه” للهاتف باستخدام Media Queries. هذا الأسلوب غالبًا ما يؤدي إلى واجهة معقدة على الشاشات الصغيرة، لأن التصميم لم يُبنَ من الأساس لهذا السياق.
نسيان ترتيب Media Queries داخل ملف CSS قد يسبب سلوكيات غير متوقعة. إذا كانت Media Queries متداخلة أو مكتوبة بطريقة غير منظمة، قد تتغلب قواعد على أخرى دون قصد، مما يجعل النتيجة مربكة للمبتدئ.
تجنب هذه الأخطاء يبدأ بالبساطة. استخدم Media Queries عند الحاجة فقط، وافهم كل شرط تكتبه، وجرّب تغييره لترى تأثيره. هذا الأسلوب العملي هو أسرع طريق للفهم الحقيقي.
بعد معرفة هذه الأخطاء، نصل إلى خطوة مهمة جدًا، وهي كيفية التدريب على Media Queries بطريقة صحيحة، حتى تنتقل من الفهم النظري إلى التطبيق العملي بثقة.
كيف تتدرّب على Media Queries
أفضل طريقة لتعلّم Media Queries ليست قراءة الأكواد فقط، بل التجربة المباشرة. افتح أي صفحة بسيطة قمت بتصميمها سابقًا، وابدأ بتغيير حجم نافذة المتصفح ببطء. راقب متى يبدأ التصميم في فقدان توازنه، وهنا تحديدًا فكّر في كتابة Media Query.
استخدم أدوات المطور في المتصفح، خصوصًا وضع محاكاة الأجهزة. هذه الأدوات تسمح لك برؤية الموقع على أحجام مختلفة دون الحاجة إلى هاتف حقيقي، وتساعدك على فهم كيف يتفاعل التصميم مع تغيّر العرض.
ابدأ بأمثلة صغيرة. لا تحاول بناء صفحة معقدة منذ البداية. جرّب تغيير حجم نص، أو إعادة ترتيب عنصرين، أو إخفاء صورة واحدة. عندما تنجح في هذه الحالات البسيطة، يصبح التعامل مع الحالات الأكبر أسهل بكثير.
اسأل نفسك دائمًا: لماذا أكتب هذه Media Query؟ إذا كان لديك سبب واضح، فأنت على الطريق الصحيح. وإذا لم يكن هناك سبب سوى “لأن الجميع يستخدمها”، فغالبًا يمكن الاستغناء عنها بتصميم أفضل.
مع التكرار والممارسة، ستلاحظ أن Media Queries لم تعد شيئًا تخشاه، بل أداة طبيعية ضمن أدواتك اليومية في CSS. هذا الشعور هو علامة واضحة على أنك بدأت تفهم الفكرة بعمق.
بعد هذا التدريب العملي، نصل إلى الخلاصة النهائية، حيث نجمع كل ما تعلمناه في صورة واضحة ومبسطة تساعدك على الانتقال للمرحلة التالية بثقة.
الخاتمة: Media Queries خطوة أساسية لكل مبتدئ
Media Queries ليست مفهومًا معقدًا كما يبدو في البداية، بل أداة بسيطة تجعل CSS أكثر ذكاءً واستجابة للواقع. عندما تفهم أنها مجرد شروط تُطبّق عند الحاجة، يصبح استخدامها طبيعيًا وسهلًا.
للمبتدئ، الأهم هو التركيز على الفكرة لا على الأرقام. لا تحفظ مقاسات جاهزة، ولا تكتب Media Queries لمجرد الكتابة. راقب التصميم، لاحظ متى يحتاج إلى تغيير، ثم استخدم Media Query واحدة واضحة تخدم هذا الهدف.
مع الوقت، ستكتشف أن Media Queries هي جزء من صورة أكبر تُسمّى التصميم المتجاوب. كل ما تعلمته هنا سيكون أساسًا قويًا للانتقال إلى مفاهيم أعمق مثل Mobile First، Flexbox، و Grid.
ابدأ صغيرًا، جرّب كثيرًا، ولا تخف من الخطأ. كل Media Query تكتبها عن فهم تقرّبك خطوة إضافية نحو كتابة CSS احترافية ومتوازنة تعمل بشكل جيد على أي شاشة.
