المقاييس و الوحدات فى CSS3

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

نسبيrelative

مطلق absolute

زاويةangle

زمنtime

في هذه المقالة ، نحاول ان نستكشف كيف تعمل وحدات الطول هذه مع الأمثلة.

وحدات الطول النسبي Relative Length Units

تحدد وحدات الطول النسبي الطول نسبةً إلى خاصية الطول الأخرى. تتميز الوحدات ذات الطول النسبي بقياس أفضل بين وسائط التقديم المختلفة.

em	تشير الى قيمه محسوبة بالنسبة إلى حجم الخط الحالي لعنصر الأصل. على سبيل المثال ، يشير 2em إلى حجم أكبر بمقدار مرتين لحجم العنصر الحالي
ex	تحسب نسبة إلى ارتفاع الخط الحالي وهى نادرا ما تستخدم
px	البكسل هو اصغر عنصر يمكن رؤيته على الشاشه واصغر ما يمكن تمثيله و التحكم فيه و يتم حساب حجم البكسل بالنسبة لجهاز العرض و بالنسبة للأجهزة ذات نقطة في البوصة المنخفضة ، فإن نقطة واحدة في الشاشة هي نقطة واحدة في الشاشة. للشاشات عالية الدقة ، قد يشير 1px إلى وحدات بكسل متعددة للأجهزة. و تقريبا البكسل = (1 بكسل = 1/96 من 1 بوصة)
%	قيمة النسبة المئوية بالنسبة لأي عنصربالنسبة للعنصر الرئيسي. على سبيل المثال ، عرض 50 ٪ من الحاوية
rem	بالنسبة إلى حجم خط عنصر الجذر
vw	تقاس كنسبة مئوية من عرض منفذ العرض viewport*. مثلا عرض منفذ العرض هو 100 سم اذن 1vw = 1 سم
vh	تقاس كنسبة مئوية لارتفاع إطار العرض. مثلاارتفاع الاطار 100 سم اذن 1 vh = 1سم
vmin	قيمة النسبة المئوية لبعد منفذ العرض الأصغر. يتم دعمه كـ "vm" في Internet Explorer 9 والإصدارات السابقة.
vmax	قيمة النسبة المئوية لبعد منفذ العرض الأكبر. هذا غير معتمد من قبل IE.
ch	تقاس نسبة إلى عرض صفر (0).

* بكسل تعنى نسبة إلى جهاز العرض. بالنسبة للأجهزة منخفضة الدقه البوصة ، تساوى 1 هي وحدة بكسل واحدة (نقطة) من الشاشة. بالنسبة للطابعات والشاشات عالية الدقة ، يعني 1px وحدات بكسل متعددة.

نصيحة: وحدات em & rem عملية في إنشاء تخطيط قابل للتطوير بشكل مثالي! * Viewport = حجم نافذة المتصفح. إذا كان إطار العرض 50 سم ، 1 فولت = 0.5 سم

وحدات الطول المطلقة Absolute Length Units

in	القيمة المطلقة في بوصة. 1 بوصة = 2.54 سنتيمتر= 96 بكسل `inches (1in = 96px = 2.54cm)`
cm	سنتيمتر
mm	ملىمتر
pt	النقاط ( نقطة واحدة = 1/72 بوصة ) `inches( 1in = 96px = 2.54cm )`
pc	البيس ( 1 بيس = 12 نقطة ) `Picas ( 1 pica = 12 points )`

نصيحة:

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

وحدات زاوية Angle Units

deg	الدرجات نقيس الوقت بالساعات والدقائق والثواني ، حيث 1 ساعة = 60 دقيقة و 1 دقيقة = 60 ثانية. وبالمثل ، أثناء قياس الزوايا `°1 درجة = 60′ دقيقة` `1′دقيقة = 60 ″ ثانيه`
grad
rad
turn	تمثل دورة تامه اى دائرة كاملة او عبارة عن حركة دائرية كاملة

وحدات الوقت Time Units

ms	الملى ثانيه يساوى واحد من الف من الثانيه `1 ms = 0.001 sec`
s	هي وحدة قياس الوقت القياسية المعترف بها واستخدامها من قبل النظام الدولي للوحدات. الثانية تساوي `1/60th of a minute`

صوره توضح المتصفحات التى تدعم هذه الوحدات و المقاييس

أمثله Examples

فيما يلي بعض الأمثلة ، تبين كيف تؤثر وحدات أطوال CSS المختلفة على عرض محتوى النص. لقد بينا بشكل أساسي القيم النسبية والمطلقة لأن وحدات الزاوية / الوقت لا تنطبق على محتوى النص.

هذا هو الكود

<p style="font-size:50px;">خط كبير 50 بكسل</p>

هذه هى النتيجه

خط كبير 50 بكسل

هذا مثال على كود اخر باستخدام em

<p style="font-size:2em;color: #3b00ff;">. . . </p>

هذه هى النتيجه

هذا هو الخط باللون الأزرق بحجم 2em هذا يكافئ مرتان حجم الخط المحدد للعنصر

وحدات زاوية والوقت CSS Angle and Time Units

لا يتم استخدام وحدات الزاوية والوقت مع قيم الطول. ولكن تستخدم بشكل عام مع خصائص CSS للتحويل والانتقال مثل:

CSS Angle and Time Units

⋅image {
transform: rotate( 20deg )
transition-duration: 5s
{

نقاط يجب تذكرها عند استخدام وحدات الطول في CSS

فيما يلي بعض النقاط المهمة التي يجب تذكرها عند استخدام وحدات CSS

👈 عمومًا تُستخدم قيم "em" و "rem" لإنشاء تخطيطات جيدة.

👈 "em" نسبة لحجم الخط للعنصر الأصل. يشير 2em إلى حجم خط أكبر بمقدار 2 مرة للعنصر الحالي.

👈 "px" نسبة إلى دقة جهاز العرض.

👈 "٪" نسبة إلى قيمة وحدة الطول الأخرى.

👈 يتم دعم جميع وحدات طول CSS بواسطة جميع المتصفحات الرئيسية مثل Chrome و Firefox و IE و Safari و Opera.

👈 ترتبط القيم المحسوبة بـ "em" بالعنصر الأصل ، وبالتالي يجب استخدامها بعناية عند تداخل عناصر متعددة لتجنب نتائج غير متوقعة. الطريقة السهلة هي استخدام "rem" الذي يعتمد على حجم عنصر الجذر.

👈 يتم قياس جميع وحدات CSS دون أي مسافة بين القيمة والوحدة.

لا تتطلب قيمة طول الصفر (0) المعرف. على سبيل المثال ، "margin = 0؛" هي الطريقة الصحيحة لتعريف وليس "margin = 0px؛".

المصادر

modountiy

w3schools

webnots

نرجو ان تترك لنا تعليق او اذا كان لديك استفسار او ملحوظه – لا تتردد اترك تعليق واعلم اننى ساكون ممتن بذلك