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

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

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

Untitled-4

حل المشكلة:

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

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

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

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

9 تعليق

  1. كل الشكر لك أخي رشيد،
    الdisplay value ينقصها semi-colon للإغلاق، لتفادي مشاكل العرض والمعايير القياسيه، فتصبح

    #banner {display: none;}

    @العربي سمير
    الكود عباره div معرف بـ id للتحكم بظهور من خصائص css، فيصبح

    < -- Replace this line with Google Adsense code -->

    واستخدام نفس المعرف banner في خصائص css التي أشار إليها الأخ رشيد.
    مع العلم أن هناك خصائص css إضافيه لإختيار المكان المناسب للبانر، لذلك لم أقم بكتابتها لأنها تختلف بحسب المكان المطلوب.

  2. لم يظهر الكود للأسف، ربما أكواد html ممنوعه من العرض.
    هذا هو الكود، لكن قم بحذف هذا الرمز (#) المكرر داخل الكود، قمت بكتابته فقط ليظهر بشكل صحيح في التعليق

    Replace this line with Google Adsense code

  3. شكرا اخى الكريم على المعلومة بس انا حطيت الكود ده فى ملف الستايل (style.css) ولم يتغير اى شئ
    اعمل اية دلوقتى

    ده بالظبط الى انا عملته حطيت الكود ده @media screen and (max-width: 1250px)
    {
    #banner {display: none}
    }

    فى استيل وبرضوا مش نافع ارجو انك ترد على قريبا

أضف تعليقاً

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