32- كورس CSS للمبتدئين – CSS: الوحدات px و % و em و rem و vw و vh

“`html

مقدمة إلى وحدات القياس في CSS

تعتبر وحدات القياس في CSS أدوات حيوية تتيح للمصممين والمطورين تحديد حجم العناصر في صفحات الويب. تتنوع هذه الوحدات بين الوحدات الثابتة مثل البيكسل (px) والوحدات النسبية مثل النسبة المئوية (%)، em، rem، vw، وvh. كل من هذه الوحدات لها استخداماتها الخاصة ومزاياها في تصميم واجهات المستخدم. في هذا المقال، سنقدم شرحًا مفصلًا لكل وحدة من هذه الوحدات مدعومًا بأمثلة توضيحية.

البيكسل (px) والنسبة المئوية (%)

البيكسل (px) هو وحدة قياس ثابتة تُستخدم عادةً لتحديد الأبعاد الدقيقة لعناصر الويب مثل الصور والنصوص. تُعد هذه الوحدة موثوقة عندما تحتاج إلى قياسات دقيقة دون القلق من تغيير الأبعاد مع تغير حجم الشاشة. ومع ذلك، قد لا تكون الخيار الأفضل عندما يتعلق الأمر بالتصميم المتجاوب.

.box {
  width: 100px;
  height: 50px;
}

من ناحية أخرى، تُستخدم النسبة المئوية (%) للتعبير عن الأبعاد كنسبة من العنصر الأصل. تُعتبر هذه الوحدة مثالية للتصميمات المتجاوبة، حيث تتغير أبعاد العناصر بما يتناسب مع حجم الشاشة أو العنصر الحاوي. هذا يجعلها خيارًا ممتازًا لتصميم المواقع التي تحتاج إلى التكيف مع الأجهزة المختلفة.

.container {
  width: 50%;
}

الوحدات النسبية: em و rem

تُعتبر وحدات em و rem وحدات نسبية تعتمد على حجم الخط الأساسي. تُحسب وحدة em بناءً على حجم الخط للعناصر الحالية، مما يجعلها مفيدة عندما تحتاج إلى تحديد الأبعاد بالنسبة لحجم النص. في المقابل، تعتمد وحدة rem على حجم الخط للجذر (عنصر )، مما يسهل التحكم في الأبعاد بشكل موحد عبر مختلف العناصر.

.text {
  font-size: 2em; /* ضعف حجم الخط الأساسي */
}

.text {
  font-size: 1.5rem; /* 1.5 ضعف حجم الخط للجذر */
}

الوحدات المتجاوبة: vw و vh

تُستخدم وحدات vw و vh لتمثيل النسب المئوية من عرض وارتفاع نافذة المتصفح على التوالي. تُعد هذه الوحدات مفيدة بشكل خاص في تصميم العناصر التي تحتاج إلى التكيف مع أبعاد الشاشة المتغيرة، مثل الخلفيات والصور التي تمتد عبر الشاشة بالكامل.

.full-screen {
  width: 100vw;
  height: 100vh;
}

باستخدام هذه الوحدات، يمكنك إنشاء تصميمات متجاوبة تتكيف بشكل سلس مع مختلف أحجام الشاشات، مما يحسن من تجربة المستخدم عبر الأجهزة المتنوعة.

“`