يمكن للمصممين تعديل تصميماتهم لتلائم المستخدمين. وأبرز مثال على ذلك هو شكل جهاز المستخدم. عرضه، ونسبة العرض إلى الارتفاع للجهاز، وهكذا. باستخدام طلبات الاستعلام عن الوسائط، يمكن للمصمّمين الاستجابة لهذه أشكال النماذج المختلفة.
تبدأ طلبات البحث عن الوسائط باستخدام الكلمة الرئيسية @media (قاعدة CSS)، ويمكن استخدامها لمجموعة متنوعة من حالات الاستخدام.
استهداف أنواع مختلفة من النتائج
غالبًا ما يتم عرض المواقع الإلكترونية على الشاشات، ولكن يمكن أيضًا استخدام CSS لتصميم المواقع الإلكترونية للحصول على مخرجات أخرى أيضًا. قد تريد أن تظهر صفحات الويب بشكل معيّن على الشاشة ولكن بشكل مختلف عند طباعتها. ويمكن تحقيق هذا الغرض من خلال الاستعلام عن أنواع الوسائط.
في هذا المثال، تم ضبط لون الخلفية على الرمادي. أما إذا كانت الصفحة ستُطبع، فيجب أن يكون لون الخلفية شفافًا. ويؤدي ذلك إلى توفير حبر الطابعة للمستخدم.
body {
color: black;
background-color: grey;
}
@media print {
body {
background-color: transparent;
}
}
يمكنك استخدام قاعدة at-rule @media في جدول الأنماط على النحو التالي،
أو يمكنك إنشاء جدول أنماط منفصل واستخدام السمة media في عنصر link:
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">
إذا لم تحدد أي نوع وسائط لـ CSS،
سيتم تلقائيًا ضبط قيمة نوع الوسائط على all. هاتان الكتلتان من CSS متساويتان:
body {
color: black;
background-color: white;
}
@media all {
body {
color: black;
background-color: white;
}
}
هذان السطران من HTML متكافئان أيضًا:
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="global.css" media="all">
شروط طلب البحث
يمكنك إضافة شروط إلى أنواع الوسائط. وتُسمّى هذه الاستعلامات عن الوسائط. لا يتم تطبيق CSS إلا إذا تطابق نوع الوسائط وكان الشرط صحيحًا أيضًا. وتُعرف هذه الشروط باسم ميزات الوسائط.
هذه هي صيغة استعلامات الوسائط:
@media type and (feature)
يمكنك استخدام طلبات البحث عن الوسائط في عنصر link إذا كانت أنماطك في جدول أسلوب منفصل:
<link rel="stylesheet" href="specific.css" media="type and (feature)">
لنفترض أنك تريد تطبيق أنماط مختلفة اعتمادًا على ما إذا كانت نافذة المتصفح في الوضع الأفقي أم لا
(عرض إطار العرض أكبر من ارتفاعه) أو الوضع الرأسي
(ارتفاع إطار العرض أكبر من عرضه).
تتوفّر ميزة وسائط تُسمى orientation يمكنك استخدامها لاختبار ذلك:
@media all and (orientation: landscape) {
// Styles for landscape mode.
}
@media all and (orientation: portrait) {
// Styles for portrait mode.
}
أو إذا كنت تفضّل استخدام جداول أسلوب منفصلة:
<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">
في هذه الحالة، يكون نوع الوسائط هو all. وبما أنّ هذه هي القيمة التلقائية، يمكنك حذفها إذا أردت:
@media (orientation: landscape) {
// Styles for landscape mode.
}
@media (orientation: portrait) {
// Styles for portrait mode.
}
أو باستخدام أوراق أسلوب منفصلة:
<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">
أثناء استخدام أوراق أنماط منفصلة لأنواع مختلفة من الوسائط، مثل print، ربما لا بأس في ذلك،
قد لا يكون من الأفضل استخدام ورقة أنماط منفصلة لكل طلب بحث عن الوسائط. يمكنك استخدام @media في القواعد بدلاً من ذلك.
ضبط الأنماط بناءً على حجم إطار العرض
بالنسبة للتصميم سريع الاستجابة، فإن واحدة من أكثر ميزات الوسائط فائدة تتضمن أبعاد إطار عرض المتصفح.
لتطبيق الأنماط عندما تكون نافذة المتصفّح أعرض من عرض معيّن، استخدِم min-width.
@media (min-width: 400px) {
// Styles for viewports wider than 400 pixels.
}
استخدِم ميزة الوسائط max-width لتطبيق أنماط أقل من عرض معيّن:
@media (max-width: 400px) {
// Styles for viewports narrower than 400 pixels.
}
يمكنك استخدام أي وحدات طول في CSS في طلبات بحث الوسائط.
إذا كان المحتوى يعتمد على الصور في الغالب، قد تكون وحدات البكسل هي الخيار الأنسب.
إذا كان محتوى موقعك قائمًا على النص في الغالب،
على الأرجح، يكون من الأفضل استخدام وحدة نسبية تستند إلى حجم النص، مثل em أو ch:
@media (min-width: 25em) {
// Styles for viewports wider than 25em.
}
ويمكنك أيضًا دمج الاستعلامات عن الوسائط لتطبيق أكثر من شرط واحد.
استخدِم الكلمة and لدمج استعلامات الوسائط:
@media (min-width: 50em) and (max-width: 60em) {
// Styles for viewports wider than 50em and narrower than 60em.
}
اختيار نقاط التوقف استنادًا إلى المحتوى
تُعرف النقطة التي يصبح فيها شرط ميزة الوسائط صحيحًا باسم نقطة الإيقاف. من الأفضل اختيار نقاط التوقف استنادًا إلى المحتوى الخاص بك بدلاً من أحجام الأجهزة الشائعة، لأنّها تخضع للتغيير مع كل دورة إصدار للتكنولوجيا.
في هذا المثال، يشير 50em إلى النقطة التي تصبح فيها أسطر النص طويلة بشكل غير مريح.
لذلك، يتم إنشاء نقطة توقّف لجعل الواجهة أكثر سهولة في القراءة.
باستخدام السمة column-count، يتم تقسيم النص إلى عمودَين من تلك النقطة فصاعدًا.
@media (min-width: 50em) {
article {
column-count: 2;
}
}
النُسخ
يمكنك استخدام طلبات البحث عن الوسائط استنادًا إلى ارتفاع إطار العرض، وليس العرض فقط. وقد يكون ذلك مفيدًا لتحسين محتوى الواجهة "فوق مستوى الصفحة". في المثال السابق، إذا كان القرّاء يستخدمون نافذة متصفّح واسعة لكنّها قصيرة يتعين عليه التمرير لأسفل عمود واحد ثم التمرير مرة أخرى للوصول إلى أعلى العمود الثاني. من الأفضل تطبيق الأعمدة فقط عندما تكون مساحة العرض كافية من حيث العرض والارتفاع.
يمكنك الجمع بين طلبات البحث عن الوسائط لكي لا يتم تطبيق الأنماط إلا عند استيفاء جميع الشروط.
في هذا المثال، يجب أن يكون إطار العرض 50em عرضًا و60em على الأقل ليتم تطبيق أنماط الأعمدة.
تم اختيار نقاط الإيقاف هذه استنادًا إلى مقدار المحتوى.
@media (min-width: 50em) and (min-height: 60em) {
article {
column-count: 2;
}
}
توضِّح هذه الأمثلة كيفية استخدام طلبات البحث عن الوسائط لتكييف التصاميم مع شكل جهاز المستخدم، ولكنّها لا تُظهر سوى جزء بسيط من الإمكانات. يمكن أن تتجاوز طلبات البحث عن الوسائط العرض والارتفاع، وتصل إلى الإعدادات المفضّلة للمستخدمين بشأن ميزات تسهيل الاستخدام وألوان المظهر. يعد استخدام الاستعلامات عن الوسائط لإجراء تعديلات التخطيط بداية رائعة لتصميم سريع الاستجابة، يعتمد على هذه الميزات وغيرها.
التحقّق من فهمك
اختبر معلوماتك حول الاستعلامات المتجاوبة عن الوسائط.
هل استعلامات الوسائط متوفّرة لحجم الشاشة فقط؟
هل الشاشات هي المكان الوحيد الذي يمكن فيه مشاهدة محتوى الويب أو عرضه؟
ما هو نوع الوسائط التلقائي؟
screenscreen ليس النوع التلقائي.nonenone ليس نوع وسائط صالحًا.allsomesome ليس نوع وسائط صالحًا.landscapelandscape ليس نوع وسائط صالحًا.ما الذي يمكنك استخدامه لمنع المتصفّح من تكبير تصميم على الأجهزة الجوّالة؟
width: 100%font-size: 200%<meta name="viewport" content="width=device-width, initial-scale=1">الاستعلام عن الوسائط الذي ينطبق عندما تكون نافذة المتصفّح فوق 720px
@media (width: 720px)720px.@media (max-width: 720px)720px.@media (min-width: 720px)720px.@media (clamp-width: 720px)clamp-width ليس شرطًا صالحًا لميزة طلب البحث عن الوسائط.