شرح طريقة إخفاء عنصر معيّن حسب دقة الشاشة

أحيانًا نرغب بإخفاء عنصر معيّن في الموقع حسب دقة التصفّح. مثلًا، لدينا إعلان جانبي عامودي في الموقع بمقاس 120px/600px ولكن المشكلة تكمن عندما يتصفح الزائر الموقع بدقة منخفضة، عندها سيظهر الإعلان فوق الموقع.

صورة توضيحية للمشكلة:

Untitled-4

حل المشكلة:

أضف الكود التالي في ملف الستايل.

[css]@media screen and (max-width: 1250px)
{
#banner {display: none}
}
[/css]

في هذه الحالة إذا تصفح الزائر الموقع بدقة أقل من 1250px عرض، عندها سيختفي #banner بينما من يتصفح بدقة 1250px عرض وما فوق سوف يستمر #banner بالظهور.

طبعًا العنصر الذي تريد أن تخفيه تضعه في داخل div وتسميه كما تريد كما يمكنك أيضًا أن تضبط الدقة وتغيّر الرقم 1250px للرقم الذي تريده.

اظهر المزيد

مقالات ذات صلة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى