التكيّف مع الشاشات

تتسلّم صفحة عرضها على الجوال معطوب. ومع ذلك يبدو الكود واضحًا: <div class="lg:flex md:flex-col sm:hidden">. تُصغّر النافذة فلا يكون للسلوك أي معنى؛ يختفي العنصر على الجهاز اللوحي، ويظهر من جديد على الهاتف، ولا يحدث التحول إلى عمود أبدًا. تضيف sm:block فتُصلح حالة وتُفسد حالتين أخريين. وبعد ساعة تجد سبع بادئات متراكمة وتجرّب عشوائيًا.

يعود الارتباك كله إلى سوء فهم لكلمة واحدة. فـ md: لا تعني «على شاشة متوسطة»، بل «ابتداءً من 768 بكسل فما فوق». هذه عتبات عرض أدنى، وليست شرائح. لذلك فإن sm:hidden لا تُخفي العنصر على الشاشات الصغيرة، بل تُخفيه ابتداءً من 640 بكسل، أي على جميع الشاشات عدا الصغيرة. وحين يُستوعب هذا الأمر تصبح الكتابة آلية، ولن تكدّس سبع بادئات بعد الآن.

العتبات ومعناها

الفئة التي لا بادئة لها تُطبَّق في كل مكان. أما البادئة فلا تفعل سوى إضافة استثناء ابتداءً من العتبة المقابلة، وترث العتبات العليا من الدنيا: تبقى md:flex فعّالة عند 1400 بكسل ما دامت لا توجد فئة lg: أو xl: تناقضها.