المقاييس و الوحدات فى 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>
هذه هى النتيجه
هذا مثال على كود اخر باستخدام 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؛".
المصادر
نرجو ان تترك لنا تعليق او اذا كان لديك استفسار او ملحوظه – لا تتردد اترك تعليق واعلم اننى ساكون ممتن بذلك