تعلّم استعلامات الوسائط في CSS عبر بناء ثلاثة مشاريع عملية

مقدمة: لماذا تُعد CSS Media Queries أساس التصميم المتجاوب؟

أصبح التوافق مع مختلف أحجام الشاشات ضرورة حقيقية في تطوير الواجهات الحديثة، ولم يعد كافياً أن يبدو الموقع جيداً على شاشة الحاسوب فقط. هنا يأتي دور CSS Media Queries، وهي الأداة التي تسمح لك بتخصيص تنسيق الصفحة بحسب عرض الشاشة أو نوع الجهاز، بحيث يحصل المستخدم على تجربة مريحة سواء كان يتصفح من هاتف ذكي أو جهاز لوحي أو حاسوب مكتبي.

في هذا الدليل العملي، سنتعلّم المفهوم خطوة بخطوة، ثم نطبّقه مباشرة عبر ثلاثة مشاريع تساعدك على فهم الفكرة بشكل واضح وقابل للتنفيذ.

محتويات المقال

• ما هي CSS Media Queries؟
• كيفية تجهيز بيئة العمل
• صياغة استعلامات الوسائط وفهم مكوّناتها
• المشروع الأول: تغيير الألوان حسب حجم الشاشة
• المشروع الثاني: بناء صفحة شخصية متجاوبة
• المشروع الثالث: تصميم بطاقات Card Layout متجاوبة
• الخلاصة التقنية

ما هي CSS Media Queries؟

استعلامات الوسائط في CSS هي قواعد تسمح بتطبيق أنماط مختلفة عند تحقق شروط معيّنة، مثل أن يكون عرض الشاشة أقل من 768px أو أكبر من 1200px. وبفضلها يمكن تصميم واجهات مرنة تتكيّف مع حجم العرض بدلاً من فرض تنسيق ثابت على جميع الأجهزة.

الفائدة الأساسية هنا هي تحسين قابلية الاستخدام، وتقليل الحاجة إلى إنشاء نسخ متعددة من الصفحة نفسها. كما أن المواقع المتجاوبة تكون أكثر ملاءمة لمحركات البحث، وتقدّم تجربة أفضل للمستخدم، وهو ما ينعكس إيجابياً على الأداء العام للموقع.

ومن أشهر الأمثلة العملية على استخدام هذه التقنية تحويل تخطيط البطاقات أو القوائم من صف أفقي على الشاشات الكبيرة إلى أعمدة رأسية على شاشات الهواتف.

كيفية تجهيز المشروع قبل البدء

قبل كتابة أي سطر برمجي، من الأفضل تجهيز بيئة العمل بشكل منظّم. في هذا الشرح سنستخدم ملفات HTML وSCSS وJavaScript، مع محرر مثل VS Code.

الخطوات الأساسية

1. أنشئ مجلداً باسم Project-1.
2. افتحه داخل VS Code.
3. أنشئ الملفات التالية: index.html وstyle.scss وmain.js.
4. ثبّت إضافتي Live Server وSASS Compiler.
5. شغّل المشروع محلياً لمعاينة التغييرات مباشرة.

بنية HTML الأولية

أضف داخل وسم body الحاوية الأساسية التالية:

<div class="container"></div>

ولعرض عرض النافذة الحالي أثناء التجربة، أضف هذا العنصر أيضاً:

<div id="size"></div>

ما هو SCSS ولماذا نستخدمه بدلاً من CSS التقليدية؟

SCSS هو معالج مسبق للغة CSS يوفّر مزايا إضافية تجعل كتابة التنسيقات أكثر تنظيماً ومرونة. ومن أبرز مزاياه:

• إمكانية استخدام المتغيرات مثل $mobile و$tablet.
• دعم التداخل بين المحددات بطريقة أوضح.
• تقليل التكرار عبر Mixins وأدوات أخرى.
• تحسين صيانة المشروع كلما كبر حجمه.

لنبدأ بإعدادات عامة داخل ملف style.scss:

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;

  body {
    font-size: 35px;
    font-family: sans-serif;
  }
}

ولا تنسَ تحديد ارتفاع الحاوية الرئيسية:

.container {
  height: 100vh;
}

ثم نسّق العنصر #size ليظهر في مكان واضح:

#size {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  color: red;
  font-size: 35px;
}

تحديث عرض الشاشة باستخدام JavaScript

حتى نرى عرض النافذة يتغيّر مباشرة، سنكتب دالة بسيطة داخل ملف main.js:

window.onresize = screen;
window.onload = screen;

function screen() {
  Width = window.innerWidth;
  document.getElementById("size").innerHTML = "Width : " + Width + " px";
}

الصور المتجاوبة جزء أساسي من التجاوب

التجاوب لا يقتصر على النصوص والحاويات فقط، بل يشمل الصور أيضاً. لهذا ستحتاج إلى الصور الخاصة بالمشروع ووضعها داخل مجلد images. بعد ذلك يمكن التحكم في سلوكها باستخدام خصائص مثل background-size وbackground-position وbackground-repeat.

صياغة CSS Media Query وفهم مكوّناتها

الصياغة الأساسية لاستعلام الوسائط تبدو بهذا الشكل:

@media screen and (max-width: 768px) {
  .container {
    /* Your code here */
  }
}

تتكوّن الصياغة من أربعة أجزاء رئيسية:

• التصريح @media.
• نوع الوسيط مثل screen.
• الشروط مثل min-width وmax-width.
• القواعد التي تُطبّق عند تحقق الشرط.

أنواع الوسائط الشائعة

• all: لجميع أنواع الوسائط.
• print: للطباعة.
• screen: للشاشات.
• speech: لبرمجيات القراءة الصوتية.

متى نستخدم العامل and؟

نستخدم and عند الجمع بين أكثر من شرط. فإذا كان لدينا نوع وسيط مع حد أقصى أو أدنى للعرض، نربط بينهما باستخدام هذا العامل.

@media screen {
  .container {
    /* Your code here */
  }
}

@media screen and (max-width: 768px) {
  .container {
    /* Your code here */
  }
}

@media (min-width: 480px) and (max-width: 768px) {
  .container {
    /* Your code here */
  }
}

@media screen, (min-width: 480px) and (max-width: 768px) {
  .container {
    /* Your code here */
  }
}

الفرق بين min-width وmax-width

هذا الجزء هو الأهم عملياً:

• max-width: يطبّق الأنماط داخل الحد المحدد أو أقل منه.
• min-width: يطبّق الأنماط ابتداءً من الحد المحدد وما فوقه.

مثال على max-width:

.container {
  background-color: white;
  height: 100vh;
  display: grid;
  place-items: center;
}

@media screen and (max-width: 500px) {
  .container {
    background-color: $color-1;
  }
}

مثال على min-width:

.container {
  background-color: white;
  height: 100vh;
  display: grid;
  place-items: center;
}

@media screen and (min-width: 500px) {
  .container {
    background-color: $color-1;
  }
}

المشروع الأول: تغيير لون الخلفية حسب حجم الشاشة

هذا المشروع مثالي لفهم نقاط التوقف Breakpoints بصورة واضحة وسريعة.

كود HTML

<div class="container">
  <div class="text">Hello Screen !</div>
</div>

تعريف الألوان والمتغيرات في SCSS

$color-1: #cdb4db;
$color-2: #fff1e6;
$color-3: #52b788;
$color-4: #bee1e6;

هذه الألوان ستستخدم لتمييز كل نوع من الشاشات بشكل بصري واضح.

.container {
  display: grid;
  place-items: center;
  background-color: $color-1;
  height: 100vh;
}

.text {
}

تحديد نقاط التوقف

يمكننا اعتماد القيم الشائعة التالية:

• الهاتف: 576px
• الجهاز اللوحي: 768px
• الحاسوب المحمول: 992px
• سطح المكتب: 1200px

$mobile: 576px;
$tablet: 768px;
$laptop: 992px;
$desktop: 1200px;

.container {
  background-color: white;
  height: 100vh;
  display: grid;
  place-items: center;
}

ترتيب كتابة الاستعلامات مهم

عند استخدام max-width، من الأفضل البدء من الشاشات الأكبر إلى الأصغر حتى لا تتداخل القواعد بشكل غير متوقع.

@media screen and (max-width: $desktop) {
  .container {
    background-color: $color-4;
  }
}

@media screen and (max-width: $laptop) {
  .container {
    background-color: $color-3;
  }
}

@media screen and (max-width: $tablet) {
  .container {
    background-color: $color-2;
  }
}

@media screen and (max-width: $mobile) {
  .container {
    background-color: $color-1;
  }
}

بعد إتمام هذا المشروع تكون قد فهمت كيف تنتقل الأنماط بين أحجام الشاشات المختلفة، وهي خطوة أساسية قبل بناء تخطيطات أكثر واقعية.

المشروع الثاني: بناء صفحة شخصية متجاوبة

في هذا المشروع سننتقل من مثال تعليمي بسيط إلى واجهة أقرب إلى موقع حقيقي، تتضمن رأس الصفحة، وقسماً رئيسياً يحوي صورة ونصاً، وتذييلاً لأيقونات التواصل.

إنشاء مجلد الصور

أنشئ مجلداً باسم images داخل المشروع، ثم ضع فيه جميع الصور المستخدمة.

بنية HTML

<div class="container">
  <div class="header">
    <div class="header__logo">Miya Ruma</div>
    <div class="header__menu">
      <div class="header__menu-1">Home</div>
      <div class="header__menu-2">Portfolio</div>
      <div class="header__menu-3">Contacts</div>
    </div>
  </div>

  <div class="main">
    <div class="main__image"></div>
    <div class="main__text">
      <div class="main__text-1">Hello 👋</div>
      <div class="main__text-2">I'm <span>Miya Ruma</span></div>
      <div class="main__text-3">A Designer From</div>
      <div class="main__text-4">Tokyo, Japan</div>
    </div>
  </div>

  <div class="footer">
    <div class="footer__instagram"><img src="./images/instagram.png" alt="Instagram"></div>
    <div class="footer__twitter"><img src="./images/twitter-sign.png" alt="Twitter"></div>
    <div class="footer__dribbble"><img src="./images/dribbble-logo.png" alt="Dribbble"></div>
    <div class="footer__behance"><img src="./images/behance.png" alt="Behance"></div>
  </div>
</div>

إعادة تهيئة ملف SCSS

* {
  margin: 0px 5px;
  padding: 0px;
  box-sizing: border-box;

  body {
    font-family: sans-serif;
  }
}

اختيار الكتل الرئيسية والأبناء

.container {}
.header {}
.main {}
.footer {}

.header {
  &__logo {}
  &__menu {}
}

.main {
  &__image {}
  &__text {}
}

.footer {
  [class^="footer__"] {}
}

هذا الأسلوب في التسمية قريب من منهجية BEM، ويساعد على تنظيم العناصر بشكل أوضح.

بناء تخطيط سطح المكتب

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  flex-direction: row;

  &__menu {
    display: flex;
    flex-direction: row;
  }
}

.header {
  border: 2px solid red;
  height: 10%;
}

.main {
  border: 2px solid black;
  height: 80%;
}

.footer {
  border: 2px solid green;
  height: 10%;
}

تنسيق الرأس Header

.header {
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  &__logo {
    font-size: 4vw;
  }

  &__menu {
    display: flex;
    font-size: 2.5vw;
    gap: 15px;
  }
}

إضافة الصورة والنص في القسم الرئيسي

.main {
  display: flex;
  flex-direction: row;
  border: 2px solid black;
  height: 80%;

  &__image {
    background-image: url("./images/Portrait.png");
    width: 50%;
  }

  &__text {
    width: 50%;
  }
}

جعل الصورة متجاوبة

.main {
  &__image {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
  }
}

تنسيق النصوص

.main {
  &__text {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  span {
    color: red;
  }
}

.main {
  &__text {
    gap: 15px;

    &-1 {
      font-size: 10vw;
    }

    &-2,
    &-3,
    &-4 {
      font-size: 5vw;
    }
  }
}

تنسيق التذييل Footer

.footer {
  [class^="footer__"] {
    img {
      width: 5.3vw;
    }
  }
}

.footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  margin-right: 10%;
}

تخطيط الهاتف المحمول

الآن نضيف استعلاماً عند العرض 650px لتغيير توزيع العناصر بما يناسب الشاشات الصغيرة.

@media (max-width: 650px) {
  .header {
    justify-content: center;

    &__logo {
      font-size: 40px;
    }

    &__menu {
      display: none;
    }
  }
}

@media (max-width: 650px) {
  .main {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

@media (max-width: 650px) {
  .main {
    &__image {
      height: 200px;
      width: 200px;
      background-size: 100%;
      border-radius: 100%;
      background-position: center;
    }

    &__text {
      width: 100%;

      &-1 {
        display: none;
      }

      &-2,
      &-3,
      &-4 {
        font-size: 30px;
      }
    }
  }
}

@media (max-width: 650px) {
  .footer {
    justify-content: center;
    margin: 0px;

    [class^="footer__"] {
      img {
        width: 45px;
        height: 45px;
      }
    }
  }
}

هذا المشروع يوضّح بامتياز كيف تنتقل الصفحة من تخطيط أفقي واسع إلى تخطيط عمودي مريح للهواتف دون الحاجة إلى تغيير البنية الأساسية للصفحة.

المشروع الثالث: بناء تخطيط بطاقات Card Layout متجاوب

في هذا المشروع سنطبّق المفهوم على شبكة بسيطة مكوّنة من تسع بطاقات موزعة على ثلاثة صفوف، ثم نحولها إلى أعمدة على الهاتف.

إعداد SCSS الأساسي

* {
  margin: 0px;
  padding: 0px 10px;
  box-sizing: border-box;

  body {
    font-family: sans-serif;
    font-size: 55px;
  }
}

#size {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  color: red;
  font-size: 40px;
}

بنية HTML

<div class="container">
  <div class="row-1">
    <div class="box-1">A</div>
    <div class="box-2">B</div>
    <div class="box-3">C</div>
  </div>
  <div class="row-2">
    <div class="box-4">D</div>
    <div class="box-5">E</div>
    <div class="box-6">F</div>
  </div>
  <div class="row-3">
    <div class="box-7">G</div>
    <div class="box-8">H</div>
    <div class="box-9">I</div>
  </div>
</div>
<div id="size"></div>

تنسيق الصفوف والصناديق

.container {
}

[class^="row-"] {
}

[class^="box-"] {
}

[class^="row-"] {
  display: flex;
  flex-direction: row;
}

[class^="box-"] {
  background-color: #c4c4c4;
  border: 2px solid black;
  width: (100%) / 3;
  height: (100vh) / 3;
  display: grid;
  place-items: center;
}

إضافة المسافات بين الصفوف والصناديق

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  gap: 30px;
}

[class^="row-"] {
  display: flex;
  flex-direction: row;
  gap: 30px;
}

تحويل التخطيط إلى نسخة هاتف

@media (max-width: 650px) {
  [class^="row-"] {
    flex-direction: column;
  }

  [class^="box-"] {
    width: 100%;
  }
}

هذا المثال يرسّخ فكرة مهمة جداً: التجاوب ليس دائماً معقداً، وأحياناً يكفي تغيير flex-direction مع بعض المقاسات لتتحول الواجهة بالكامل إلى تجربة استخدام أفضل.

أفضل ممارسات عند استخدام Media Queries

• ابدأ بتحديد نقاط التوقف بناءً على المحتوى، لا على الأجهزة فقط.
• استخدم عدداً معقولاً من الاستعلامات لتجنب التعقيد الزائد.
• اختبر التصميم فعلياً على أكثر من عرض شاشة.
• احرص على أن تكون الصور مرنة ومناسبة للأجهزة الصغيرة.
• نظّم المتغيرات في SCSS لتسهيل التعديل لاحقاً.
• راقب قابلية القراءة وحجم الخط والمسافات، فالتجاوب لا يعني فقط تحريك العناصر.

الخلاصة التقنية

تُعد CSS Media Queries حجر الأساس في بناء واجهات متجاوبة واحترافية. وما يميزها فعلاً هو أنها لا تقتصر على تغيير الشكل، بل تساهم في تحسين تجربة المستخدم، ورفع قابلية الوصول، وجعل المحتوى أكثر مرونة عبر الأجهزة المختلفة. من الناحية التقنية، أفضل نهج هو الجمع بين تخطيط جيد باستخدام Flexbox أو Grid، مع نقاط توقف مدروسة، وكتابة أنماط واضحة ومنظمة داخل SCSS. إذا أتقنت هذه العناصر، فستتمكن من بناء صفحات حديثة قابلة للتوسع وسهلة الصيانة.