تعد التجربة القابلة للاستخدام والتي يمكن الوصول إليها أمرًا حيويًا لموقع ويب ناجح. إذا كان لدى قرائك تجربة إيجابية ، فمن المرجح أن ينفذوا دعوة للعمل ، بما في ذلك شراء المنتجات. ومن المرجح أيضًا أن يعودوا أو يوصوا الآخرين بموقعك. الخبرة هي المفتاح.
تقدم استعلامات الوسائط ميزات CSS مختلفة يمكنها تخصيص موقع الويب الخاص بك. إنها تتيح لك تخصيص تجربة كل مستخدم بناءً على إمكانيات أجهزتهم. تعرف على كيفية منح القراء أفضل تجربة ، سواء كانوا يستخدمون هواتفهم أو شاشة سطح مكتب كبيرة.
1. ميزة المؤشر
ال media حكم يحتوي على ميزة المؤشر التي تسمح لك بتخصيص التصميم الخاص بك بناءً على جهاز التأشير الأساسي. يمكنك اختبار التوافر والجودة.
هذا المؤشر ميزة الاستعلام عن الوسائط تأخذ واحدة من ثلاث قيم: لا شيء ، خشن ، أو جيد. ال لا أحد يتم تطبيق القيمة في حالة عدم وجود جهاز تأشير. ال خشن يتم تطبيق القيمة عندما يكون لجهاز التأشير الأساسي مستوى منخفض من الدقة. و ال بخير يتم تطبيق القيمة عندما يتمتع جهاز التأشير الأساسي بمستوى عالٍ من الدقة.
استخدام ميزة المؤشر
المؤشر
خيار واحد
الخيار الثاني
يُنشئ الكود أعلاه خيارين لإدخال الراديو ، والذي سيختلف بناءً على دقة جهاز التأشير الأساسي للكمبيوتر.
سيعرض الكمبيوتر الذي يحتوي على جهاز توجيه أساسي دقيق (أو عالي الجودة) صفحة الويب التالية:
سيعرض الكمبيوتر الذي يحتوي على جهاز أساسي بدقة محدودة (أو جودة منخفضة) صفحة الويب التالية:
يحتوي الجهاز الذي يحتوي على جهاز توجيه أساسي بمستوى محدود من الدقة على أزرار راديو أكبر. هذا يعطي تجربة مستخدم أفضل لهؤلاء المستخدمين. باستخدام ميزة المؤشر ، يمكنك ضمان تمتع جميع المستخدمين بتجربة ممتعة ، بغض النظر عن أجهزتهم.
2. ميزة أي مؤشر
مثل ميزة المؤشر ، فإن ميزة استعلام وسائط أي مؤشر تستهدف أجهزة التأشير. ومع ذلك ، تقوم ميزة أي مؤشر بتقييم كل جهاز تأشير للكمبيوتر. تستخدم ميزة أي مؤشر أيضًا ملحق لا أحد, خشن، و بخير القيم.
استخدام ميزة أي مؤشر
media (أي مؤشر: جيد) {
الإدخال [نوع = "راديو"] {
العرض: 15 بكسل ؛
الارتفاع: 15 بكسل ؛
نصف قطر الحدود: 20 بكسل ؛
عرض الحدود: 1 بكسل ؛
}
}
media (أي مؤشر: خشن) {
الإدخال [نوع = "راديو"] {
العرض: 25 بكسل ؛
الارتفاع: 25 بكسل ؛
نصف قطر الحدود: 20 بكسل ؛
عرض الحدود: 2 بكسل ؛
}
}
يمكنك ببساطة استبدال الكود أعلاه بقسم الاستعلام عن الوسائط في الكود في مثال ميزة المؤشر. يقدم الكود أعلاه عرضًا مناسبًا استنادًا إلى جودة أي جهاز تأشير قد يحتوي عليه الكمبيوتر.
3. ميزة التحويم
تعمل ميزة استعلام وسائط التمرير على تقييم ما إذا كانت آلية الإدخال الأساسية للجهاز قادرة على التمرير فوق العناصر الموجودة في واجهة المستخدم.
استخدام ميزة التمرير
/ * CSS * /
أ{
زخرفة النص: لا شيء ؛
لون أسود؛
}
media (مرر: تحوم) {
أ: تحوم {
لون أزرق؛
}
}
لغة البرمجة
عنصر ارتباط
سيعرض الرمز أعلاه جزء. سيتغير اللون (من الأسود إلى الأزرق) عندما تحوم فوقه آلية الإدخال الأساسية للجهاز (الذي يدعم التحويم).
4. ميزة أي تحوم
ال أي تحوم يستهدف الاستعلام عن الوسائط أي آلية إدخال ، بما في ذلك آلية الإدخال الأساسي.
استخدام ميزة أي تحوم
media (أي تحوم: تحوم) {
أ: تحوم {
لون أزرق؛
}
}
ينتج عن استعلام الوسائط أعلاه تأثير التمرير لأي آلية إدخال قادرة على التحويم فوق عنصر.
5. ميزة القرار
تحسب ميزة الاستعلام عن وسائط الدقة عدد وحدات البكسل المعروضة بواسطة جهاز معين. يتميز الجهاز الذي يعرض عددًا أكبر من وحدات البكسل في البوصة بدقة أفضل لأنه يعرض صورًا بمزيد من التفاصيل. يمكن أن تساعد هذه الميزة المطور في تحديد أي جهاز قد يرى المستخدمون عناصر في واجهة المستخدم بشكل أكثر وضوحًا.
تستخدم ميزة الدقة النطاق. هذا يعني أنه بالإضافة إلى استخدام ملف الدقة الكلمات الرئيسية ، يمكنك استخدام دقيقة و الدقة القصوى. تنتمي ميزة دقة استعلام الوسائط إلى نوع بيانات الدقة. هذا يعني أن ميزة الدقة قابلة للقياس في واحدة من ثلاث وحدات: النقاط لكل بوصة (dpi) ، أو النقاط لكل سنتيمتر (dpcm) ، أو النقاط لكل بكسل (dppx).
استخدام ميزة الدقة
/ * CSS * /
media (الدقة الدنيا: 72 نقطة في البوصة) {
ص {
اللون الابيض؛
لون الخلفية: أزرق ؛
}
}
لغة البرمجة
Lorem ipsum dolor sit، amet consectetur adipisicing elit.
أقل دقة يمكن أن يمتلكها الجهاز ولا يزال يعرض صورًا عالية الجودة هي 72 نقطة في البوصة. لذلك ، إذا كانت دقة الجهاز تبلغ 72 نقطة في البوصة أو أكثر ، فسيتم عرض الإخراج التالي في المستعرض الخاص به:
6. ميزة التوجه
يمكن أن يكون لإطار عرض الجهاز اتجاه واحد فقط: لوحة أو المناظر الطبيعيه. يجب أن تلاحظ أن اتجاه منفذ العرض يختلف عن اتجاه الجهاز. إذا كان الجهاز يستخدم لوحة مفاتيح ناعمة ، فقد يتغير إطار العرض الخاص به من الوضع الرأسي إلى الوضع الأفقي بينما لا يزال الجهاز نفسه في الوضع الرأسي.
استخدام ميزة التوجيه
/ * CSS * /
الجسم{
عرض: فليكس ؛
}
الجزء{
الحدود: 2 بكسل أزرق صلب ؛
الحشو: 3 بكسل ؛
الهامش: 3 بكسل ؛
}
media (الاتجاه: أفقي) {
الجسم {
الاتجاه المرن: صف.
}
}media (الاتجاه: عمودي) {
الجسم {
الاتجاه المرن: العمود.
}
}
لغة البرمجةLorem ipsum، dolor sit amet consectetur adipisicing elit. Lorem ipsum، dolor sit amet consectetur adipisicing elit. Lorem ipsum، dolor sit amet consectetur adipisicing elit.
يغير الكود أعلاه تخطيط قاعدة صفحة الويب بناءً على اتجاه الجهاز.
سيعرض الجهاز الذي يحتوي على منفذ عرض في الوضع الأفقي صفحة الويب التالية:
سيعرض الجهاز الذي يحتوي على منفذ عرض في الوضع الرأسي صفحة الويب التالية:
7. ميزة الارتفاع
تتيح لك ميزة الاستعلام عن وسائط الارتفاع تحديد نمط CSS بناءً على ارتفاع منفذ العرض لجهاز المستخدم. تدعم هذه الميزة النطاق ، لذا يمكنك أيضًا استخدام ملف أدنى ارتفاع و اقصى ارتفاع الكلمات الدالة.
باستخدام ميزة الارتفاع
/ * CSS * /
media (أقل ارتفاع: 360 بكسل) {
ص {
الحدود: 2 بكسل منقط وبرتقالي ؛
}}
لغة البرمجة
Lorem ipsum dolor sit amet consectetur adipisicing elit.
يخصص الكود أعلاه ما يراه المستخدم بناءً على ارتفاع أجهزته. سيرى المستخدمون الذين يبلغ ارتفاع جهازهم 360 بكسل وما فوق شيئًا مشابهًا لصفحة الويب التالية:
لن تعرض الأجهزة التي يقل ارتفاعها عن 360 بكسل الحد حول الفقرة على صفحة الويب.
8. ميزة العرض
تتيح لك ميزة الاستعلام عن وسائط العرض إنشاء نمط CSS محدد بناءً على عرض إطار العرض لجهاز المستخدم. تدعم هذه الميزة أيضًا النطاق ، بحيث يكون لديك خيار استخدام ملف العرض الأدنى و أقصى عرض الكلمات الدالة.
استخدام ميزة العرض
/ * CSS * /
media (الحد الأدنى للعرض: 600 بكسل) {
ص {
الحدود: 2 بكسل أرجوانية صلبة ؛
}
}
لغة البرمجة
Lorem ipsum dolor sit amet consectetur adipisicing elit.
يخصص الكود أعلاه ما يراه المستخدم بناءً على عرض أجهزته. سيشاهد المستخدمون الذين يبلغ عرض جهازهم 600 بكسل وأكثر شيئًا مثل صفحة الويب التالية:
يمكن أن يكون استخدام استعلامات الوسائط القائمة على العرض والارتفاع استراتيجية فعالة في جعل موقع الويب الخاص بك متجاوبًا.
9. ميزة اللون
تقوم ميزة الاستعلام عن الوسائط الملونة بتقييم مكون لون الجهاز (أحمر ، أخضر ، أزرق). تشير القيمة إلى عدد وحدات البت التي يستخدمها العرض لكل مكون ، والذي يحدد عدد الألوان المختلفة التي يمكن أن تظهرها. تستخدم الأجهزة الحديثة عادةً شاشة 24 بت تستخدم ثمانية بت لكل مكون لون. يأخذ أيضًا قيمة عدد صحيح ، حيث يكون الجهاز عديم اللون صفرًا.
تستخدم ميزة اللون أيضًا تنسيق مين-لون و ماكس لون نطاقات.
استخدام ميزة اللون
/ * CSS * /
media (min-color: 7) {
ص {
الحدود: 2 بكسل خضراء صلبة ؛
}
}
لغة البرمجة
Lorem ipsum dolor sit amet consectetur adipisicing elit.
ستعرض الأجهزة التي تحتوي على مكون لوني مكون من سبعة وما فوق الإخراج التالي في المستعرضات الخاصة بها:
يمكنك الآن إنشاء تجارب فريدة للمستخدم
يجب أن تكون قادرًا على استخدام استعلامات الوسائط المتقدمة هذه لتحسين تجربة كل مستخدم يزور موقع الويب أو التطبيق الخاص بك. من المهم منح مستخدمي الجوّال وسطح المكتب تجربة إيجابية مماثلة على موقعك.
لا تعد الاستعلامات عن الوسائط أدوات CSS الوحيدة التي يمكنها تقوية مهارات المطور لديك.
8 نصائح وحيل أساسية لـ CSS يجب على كل مطور معرفتها
اقرأ التالي
مواضيع ذات صلة
- برمجة
- CSS
- تصميم المواقع
عن المؤلف
قاديشا كين مطور برامج متكامل وكاتب تقني / تقني. لديها قدرة مميزة على تبسيط بعض المفاهيم التكنولوجية الأكثر تعقيدًا ؛ إنتاج مادة يمكن لأي مبتدئ في مجال التكنولوجيا فهمها بسهولة. إنها شغوفة بالكتابة وتطوير البرامج الشيقة والسفر حول العالم (من خلال الأفلام الوثائقية).
اشترك في نشرتنا الإخبارية
انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!
انقر هنا للاشتراك
