22. فهم وحدات CSS: بكسل (px) ونسبة مئوية (%)
يحتاج CSS إلى وحدات لقياس الأبعاد والمسافات وأحجام الخطوط. نصنفها إلى وحدات مطلقة (ثابتة) أو نسبية (مرنة/قابلة للتوسع).
1. الوحدات المطلقة: بكسل (px)
البكسل هو الوحدة الثابتة القياسية. 1px تشير إلى نقطة فيزيائية واحدة على الشاشة (رغم أن الشاشات الحديثة تعقد هذا الأمر، إلا أنها من الناحية المفاهيمية حجم ثابت).
- الاستخدام: تحديد أحجام دقيقة وغير قابلة للتغيير للحدود، أو الظلال، أو عندما تحتاج إلى دقة مضمونة.
- الإيجابيات: دقيق وقابل للتنبؤ.
- السلبيات: غير قابل للتوسع للأجهزة المختلفة. أحجام النصوص الثابتة قد يصعب على المستخدمين ذوي الرؤية الضعيفة تكبيرها.
css .icon { width: 32px; height: 32px; }
.divider { border-bottom: 1px solid #ccc; }
2. الوحدات النسبية: النسبة المئوية (%)
وحدات النسبة المئوية نسبية لبعد العنصر الأب المباشر.
- الاستخدام: إنشاء تخطيطات مرنة حيث تتوسع العناصر مع حجم الحاوية.
- الإيجابيات: ممتازة للتصميم المتجاوب والحاويات المرنة.
- السلبيات: يمكن أن تكون مربكة. إذا كان للعنصر الابن
width: 50%، وكان للأبwidth: 50%من أبيه، سينتهي الأمر بالابن ليكون 25% من الجد الأصلي.
css .parent { width: 800px; }
.child { width: 50%; /* بعرض 400 بكسل / padding: 5%; / 5% من 800 بكسل = 40 بكسل حشوة */ }