تصميم صفحة الويب المتماثلة - استعلام وسائل الإعلام

ما هو استعلام وسائل الاعلام؟

استعلام وسائل الاعلام هو تقنية CSS تم إدخالها في CSS3.

يستخدم فقط عند استيفاء شروط معينة @media القواعد لاستدعاء قطع خصائص CSS.

مثال

إذا كان عرض نافذة المتصفح 600px أو أقل، يجب أن يكون لون الخلفية لونًا فاتحًا:

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

تجربة شخصياً

إضافة نقطة انقسام

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

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


الحاسوب المكتبي

الهاتف

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

مثال

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

/* للهواتف الذكية: */
.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) {
  /* للمستعرضات الهاتفية: */
  [class*="col-"] {
    width: 100%;
  }
}

تجربة شخصياً

تصميم أولوية الهاتف المحمول في جميع الأوقات

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

هذا يعني أننا يجب أن نقوم ببعض التحسينات في CSS.

عندما يكون العرض أقل من 768px، يجب تعديل التصميم بدلاً من تغيير العرض. قمنا بذلك بناءً على تصميم "أولوية الهاتف المحمول":

مثال

/* للمستعرضات الهاتفية: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  /* للاجهزة المكتبية: */
  .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%;}
}

تجربة شخصياً

نقطة انقسام أخرى

يمكنك إضافة عدد غير محدود من نقاط الانقسام.

سنضيف نقطة انقسام بين الهاتف اللوحي والهاتف.


الحاسوب المكتبي

الحاسوب اللوحي

الهاتف

لذلك، أضفنا استعلام وسائل الاعلام (عند 600 بكسل)، ونضيف مجموعة جديدة من الفئات للأجهزة التي تزيد عن 600 بكسل (لكن أقل من 768 بكسل):

مثال

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

/* للمستعرضات الهاتفية: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 600px) {
  /* للمستعرضات اللوحية: */
  .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) {
  /* للاجهزة المكتبية: */
  .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

للمستعرضات المكتبية:

الجزء الأول والثالث سيغطي 3 أعمدة. الجزء المتوسط سيغطي 6 أعمدة.

للمستعرضات اللوحية:

الجزء الأول سيغطي 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>

تجربة شخصياً

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

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

مثال

/* أجهزة صغيرة جدًا (الهواتف، 600px وما دون) */
@media only screen and (max-width: 600px) {...} 
/* أجهزة صغيرة (حواسيب لوحية رأسية وكبيرة الهاتف، 600 بكسل وما فوق) */
@media only screen and (min-width: 600px) {...} 
/* أجهزة متوسطة (حواسيب لوحية أفقي، 768 بكسل وما فوق) */
@media only screen and (min-width: 768px) {...} 
/* أجهزة كبيرة (حواسيب محمولة وكمبيوترات سطح المكتب، 992px وما فوق) */
@media only screen and (min-width: 992px) {...} 
/* أجهزة كبيرة جدًا (حواسيب محمولة وكمبيوترات سطح المكتب، 1200px وما فوق) */
@media only screen and (min-width: 1200px) {...}

تجربة شخصياً

اتجاه: صورة / مشهد

يمكن استخدام الاستعلام الوسعي أيضًا لتغيير تصميم الصفحة بناءً على اتجاه المتصفح

يمكنك تعيين مجموعة من خصائص CSS، وتطبيقها فقط عندما يكون عرض نافذة المتصفح أكبر من ارتفاعها، مما يُعرف بـ "الوضع العرضي"

مثال

إذا كان الاتجاه هو الوضع العرضي (landscape mode)، فإن لون خلفية الصفحة هو أزرق فاتح

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

تجربة شخصياً

اخفاء العناصر باستخدام الاستعلام الوسعي

استخدام الاستعلام الوسعي هو استخدام شائع آخر لاخفاء العناصر عند حجم الشاشة المختلفة

مثال

/* إذا كان حجم الشاشة 600 بكسل أو أقل، يرجى إخفاء العنصر */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

تجربة شخصياً

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

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

مثال

إذا كان حجم الشاشة 601px أو أكبر، يرجى تعيين font-size الخاصة بـ <div> إلى 80px
@media only screen and (min-width: 601px) {}}
  div.example {
    font-size: 80px;
  }
}
/* إذا كان حجم الشاشة 600px أو أقل، قم بتعيين font-size لـ <div> إلى 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

تجربة شخصياً

كتيب مرجعي @media CSS

لإعلام شامل عن جميع أنواع وسائل الإعلام والميزات/عبارات، يرجى زيارة استشر @media في كتيب مرجعي CSS.