75-تصميم الويب الاستجابي – استعلامات الوسائط

ما هو استعلام الوسائط (Media Query)؟

استعلام الوسائط هي تقنية CSS تم تقديمها في CSS3. تستخدم قاعدة @media لتضمين كتلة من خصائص CSS فقط إذا كان شرط معين صحيحًا.

إذا كان عرض نافذة المتصفح 600 بكسل أو أقل، فسيكون لون الخلفية أزرق فاتح.

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

إضافة نقطة توقف (Breakpoint)

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

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

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

استخدام استعلام الوسائط لإضافة نقطة توقف عند 768px

مثال: عندما يصبح عرض الشاشة (نافذة المتصفح) أقل من 768 بكسل، يجب أن يكون عرض كل عمود 100%:

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}

تصميم للجوال أولاً (Mobile First)

مصطلح “تصميم للجوال أولاً” يعني تصميم الصفحة لأجهزة الجوال قبل تصميمها لأجهزة سطح المكتب أو أي جهاز آخر (هذا يجعل الصفحة تظهر بشكل أسرع على الأجهزة الصغيرة).

يتطلب ذلك إجراء بعض التغييرات في أكواد CSS الخاصة بنا.

بدلاً من تغيير الأنماط عندما يصبح عرض الشاشة أقل من 768 بكسل، يجب علينا تعديل التصميم ليلائم الشاشات الأكبر من 768 بكسل. وهذا ما يجعل تصميمنا يتبع منهجية “تصميم للجوال أولاً”.

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

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

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

نقطة توقف أخرى (Breakpoint)

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

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

سنحقق ذلك عن طريق إضافة استعلام وسائط آخر (عند 600 بكسل) ومجموعة جديدة من الفئات للأجهزة التي يزيد عرضها عن 600 بكسل (ولكنها أقل من 768 بكسل):

على سبيل المثال:

لاحظ أن مجموعتي الفئتين متطابقتين تقريبًا، والفرق الوحيد يكمن في الاسم (col- و col-s-):

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

قد يبدو من الغريب أن يكون لدينا مجموعتان متطابقتان من الفئات، إلا أن هذا يمنحنا المرونة في تحديد سلوك الأعمدة عند كل نقطة توقف وذلك في ترميز HTML.

مثال عن ترميز HTML:

لأجهزة سطح المكتب (Desktop): سيشغل القسم الأول والثالث 3 أعمدة لكل منهما. سيشغل القسم الأوسط 6 أعمدة.

HTML

لأجهزة التابلت (Tablets): سيشغل القسم الأول 3 أعمدة، وسيشغل القسم الثاني 9 أعمدة، وسيتم عرض القسم الثالث أسفل القسمين الأولين، وسيشغل 12 عمودًا.

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

نقاط توقف نموذجية للأجهزة

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

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

الاتجاه: الوضع العمودي/الأفقي

يمكن أيضًا استخدام استعلامات الوسائط لتغيير تخطيط الصفحة وفقًا لاتجاه المتصفح. يمكنك تحديد مجموعة من خصائص CSS التي ستطبق فقط عندما يكون عرض نافذة المتصفح أكبر من ارتفاعها، وهو ما يُسمى الوضع الأفقي (Landscape).

على سبيل المثال، يمكن أن يكون للصفحة الخلفية لون أزرق فاتح فقط في الوضع الأفقي:

مثال

سيصبح خلفية الصفحة الإلكترونية أزرق فاتح في حال كان اتجاهها أفقيًا:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

إخفاء العناصر باستخدام استعلامات الوسائط

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

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

/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

تغيير حجم الخط باستخدام استعلامات الوسائط

بإمكانك أيضًا استخدام استعلامات الوسائط لتغيير حجم خط عنصر ما بأحجام شاشات مختلفة.

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

/* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}

/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}