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

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

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

Untitled-4

حل المشكلة:

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

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

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

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