يمكن للمصممين تعديل تصميماتهم لتلائم المستخدمين. وأبرز مثال على ذلك هو شكل جهاز المستخدم. عرضه، ونسبة العرض إلى الارتفاع للجهاز، وهكذا. باستخدام استعلامات الوسائط، يمكن للمصممين الرد على عوامل الشكل المختلفة هذه.
تبدأ طلبات البحث عن الوسائط باستخدام الكلمة الرئيسية @media (قاعدة CSS)، ويمكن استخدامها لمجموعة متنوعة من حالات الاستخدام.
استهداف أنواع مختلفة من المخرجات
غالبًا ما يتم عرض المواقع الإلكترونية على الشاشات، ولكن يمكن أيضًا استخدام CSS لتصميم المواقع الإلكترونية للحصول على مخرجات أخرى أيضًا. قد تريد أن تظهر صفحات الويب بطريقة واحدة على الشاشة ولكن تكون مختلفة عند طباعتها. ويمكن تحقيق هذا الغرض من خلال الاستعلام عن أنواع الوسائط.
في هذا المثال، يكون لون الخلفية رماديًا. ولكن إذا كانت الصفحة مطبوعة، يجب أن يكون لون الخلفية شفافًا. وهذا من شأنه توفير حبر الطابعة للمستخدم.
body {
color: black;
background-color: grey;
}
@media print {
body {
background-color: transparent;
}
}
يمكنك استخدام قاعدة @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 فقط إذا تطابق نوع الوسائط وكان الشرط أيضًا true. تُسمّى هذه الشروط ميزات الوسائط.
هذه هي صيغة استعلامات الوسائط:
@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.
}
اختيار نقاط الإيقاف استنادًا إلى المحتوى
تُعرف النقطة التي يصبح فيها شرط ميزة الوسائط true بنقطة إيقاف. من الأفضل اختيار نقاط التوقف بناءً على المحتوى بدلاً من أحجام الأجهزة الشائعة، حيث إنها عرضة للتغيير مع كل دورة إصدار تقنية.
في هذا المثال، 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 ليس شرطًا صالحًا لميزة الاستعلام عن الوسائط.