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

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

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

حل المشكلة:

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

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

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

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