لو تعاملت مع #CSS أكيد مرّت عليك هالوحدات للقياس :
[ px - em - rem - % - vh - vw ]
⚠️ أيش الفرق بينهم ؟ ومتى نستخدمهم ؟
الجواب هنا 🔻🚧
[ px - em - rem - % - vh - vw ]
⚠️ أيش الفرق بينهم ؟ ومتى نستخدمهم ؟
الجواب هنا 🔻🚧
1️⃣ وحدة القياس PX :
- وهي اختصار لكلمة Pixel، وحدة قياس ثابتة لا تتغير بتغيّر حجم الشاشة
⛳️ يعني لو أعطيت لنص الحجم 20px حيظهر بالحجم 20px في كل الشاشات
- وهي اختصار لكلمة Pixel، وحدة قياس ثابتة لا تتغير بتغيّر حجم الشاشة
⛳️ يعني لو أعطيت لنص الحجم 20px حيظهر بالحجم 20px في كل الشاشات
2️⃣ وحدة القياس em
- وحدة قياس نسبية غير ثابتة تعتمد قيمتها بالقياس على الأب المباشر
⛳️ مثلًا عندك div حجم الخط له 20px ( الأب )
داخل هذا الـ div لو أنشئت p وضبطت حجم الخط على 1em راح يساوي حجم الخط للعنصر الأب 20px
⛳️ أما لو ضبطته على 2em راح يساوي 40px (ضعف حجم الأب)، وهكذا..
- وحدة قياس نسبية غير ثابتة تعتمد قيمتها بالقياس على الأب المباشر
⛳️ مثلًا عندك div حجم الخط له 20px ( الأب )
داخل هذا الـ div لو أنشئت p وضبطت حجم الخط على 1em راح يساوي حجم الخط للعنصر الأب 20px
⛳️ أما لو ضبطته على 2em راح يساوي 40px (ضعف حجم الأب)، وهكذا..
3️⃣ وحدة القياس rem
- وتعني root em وتعتمد في قياسها على الجذر الأساسي في عناصر DOM وهو غالبًا العنصر html ولا تعتمد على الأب المباشر مثل em
⛳️ فمثلًا لو ضبطت حجم الخط في صفحة html على 16px فإن 1rem لأي عنصر داخله راح يساوي 16px و 2rem راح يساوي 32px وهكذا
- وتعني root em وتعتمد في قياسها على الجذر الأساسي في عناصر DOM وهو غالبًا العنصر html ولا تعتمد على الأب المباشر مثل em
⛳️ فمثلًا لو ضبطت حجم الخط في صفحة html على 16px فإن 1rem لأي عنصر داخله راح يساوي 16px و 2rem راح يساوي 32px وهكذا
4️⃣ وحدة القياس % ( النسبة المئوية )
- مشابهة لحدّ كبير وحدة القياس em فهي تأخذ قيمتها بناءً على العنصر الأب المباشر.
- مشابهة لحدّ كبير وحدة القياس em فهي تأخذ قيمتها بناءً على العنصر الأب المباشر.
5️⃣ وحدات القياس vh و vw
- لا تعتمد قيمتها على عناصر الصفحة الأعلى منها، إنما على الحجم الكلي لصفحة المتصفح viewport
⛳️ وحدة vh تساوي 1/100 من طول صفحة المتصفح، ووحدة vw تساوي 1/100 من عرض صفحة المتصفح
⛳️ نستخدمها عادةً في السلايدر لتكون بكامل حجم الشاشة نعطيها الارتفاع 100vh
- لا تعتمد قيمتها على عناصر الصفحة الأعلى منها، إنما على الحجم الكلي لصفحة المتصفح viewport
⛳️ وحدة vh تساوي 1/100 من طول صفحة المتصفح، ووحدة vw تساوي 1/100 من عرض صفحة المتصفح
⛳️ نستخدمها عادةً في السلايدر لتكون بكامل حجم الشاشة نعطيها الارتفاع 100vh
🎯يوجد وحدات قياس أخرى لكنها قليلة الاستخدام مثل:
pt - in - ex - ch - vmin - vmax - cm - mm
ممكن تطلع عليها من هنا:
developer.mozilla.org…
pt - in - ex - ch - vmin - vmax - cm - mm
ممكن تطلع عليها من هنا:
developer.mozilla.org…
Loading suggestions...