أشهر وحدات القياس في لغة css

السلام عليكم في هذا الدرس إن شاء الله سوف نتعرف على أشهر وحدات القياس في لغة css والتي تساعدك في تصميم صفحة الويب الخاصة بك لغة CSS تحتوي على العديد من وحدات القياس لتحديد حجم وموقع العناصر داخل صفحة الويب. وفي هذا الدرس، سنتحدث عن جميع وحدات القياس المتاحة في CSS وشرحها ومثال كود لكل منها والفروقات بينهما.

البكسل Pixel:

البكسل هي وحدة القياس الأكثر استخدامًا في CSS. تستخدم لتحديد حجم العناصر بدقة بكسل واحد. تعتبر وحدة القياس هذه ثابتة ولا تتغير بناءً على حجم الشاشة. المثال:

CSS

div {
    width: 200px;
    height: 100px;
}

النسبة المئوية Percentage:

تستخدم النسبة المئوية لتحديد حجم العناصر بناءً على حجم العنصر الأب الذي يتم تضمينه فيه. على سبيل المثال، إذا قمت بتعيين عرض العنصر الفرعي إلى 50٪، فسيكون العنصر نصف حجم العنصر الأب. المثال:

CSS

.parent {
    width: 500px;
    height: 500px;
}

CSS

.child {
    width: 50%;
    height: 50%;
}

الإم Em:

تستخدم الإم لتحديد حجم النص بناءً على حجم النص الأب. عدد الإم هو نسبة حجم النص المطبق إلى حجم النص الأصلي. وحدة القياس هذه تعتمد على حجم النص الأصلي الذي يتم تحديده في العنصر الأساسي. المثال:

CSS

.parent {
    font-size: 16px;
}

CSS

.child {
    font-size: 1.5em;
}

Inch:

تستخدم Inch لتحديد حجم العناصر بوحدة Inch حيث 1 Inch يساوي 96 بكسل. يمكن استخدام هذه الوحدة لتحديد حجم العناصر على الورق الحقيقي، مثل عناصر الطباعة. المثال:

CSS

div {
    width: 2in;
    height: 1in;
}

السنتيمتر Centimeter

تستخدم السنتيمتر لتحديد حجم العناصر بوحدة السنتيمتر، حيث 1 سنتيمتر يساوي 37.8 بكسل. المثال:

CSS

div {
    width: 5cm;
    height: 2cm;
}

النقطة Point:

تستخدم النقطة لتحديد حجم العناصر بوحدة النقطة، حيث 1 نقطة يساوي 1/72 Inch . يمكن استخدام هذه الوحدة لتحديد حجم العناصر على الورق الحقيقي. المثال:

CSS

div {
    font-size: 12pt;
}

البيكسل المتحرك Viewport-percentage Lengths
تستخدم وحدات القياس هذه لتحديد حجم العناصر بناءً على حجم الشاشة المستخدمة. تشمل هذه الوحدات:

vw: تمثل 1٪ من عرض الشاشة.

vh: تمثل 1٪ من ارتفاع الشاشة.

vmin: تمثل 1٪ من القيمة الأصغر بين عرض الشاشة وارتفاعها.

vmax: تمثل 1٪ من القيمة الأكبر بين عرض الشاشة وارتفاعها.

المثال:

CSS

div {
    width: 50vw;
    height: 25vh;
}

يجب ملاحظة أن وحدات العرض والارتفاع المتحركة الخاصة بالعناصر تعتمد على حجم العنصر الأب المباشر. لذلك، إذا كنت تستخدم النسبة المئوية أو الإم، فستتم معالجتها بناءً على حجم العنصر الأب المباشر. ومن الجيد استخدام وحدات القياس المتحركة لجعل العناصر متناسبة مع حجم الشاشة.

في النهاية، يجب الانتباه إلى أن استخدام وحدات القياس المناسبة يساعد في جعل صفحة الويب أكثر دقة وسلاسة في التصفح. يمكن استخدام وحدات القياس المختلفة بناءً على الحاجة والغرض من العنصر المطلوب تحديده، ويجب الاختيار بحكمة حسب المتطلبات المحددة للتصميم.