6.9 KiB
title | localeTitle |
---|---|
Units | وحدات |
وحدات
العديد من خصائص CSS مثل width
، margin
، padding
، font-size
إلخ. يحتوي CSS على طريقة للتعبير عن الطول في وحدات متعددة. الطول عبارة عن مزيج من رقم ووحدة بدون مسافات بيضاء. على سبيل المثال ، 5px
و 0.9em
ذلك
الطول
وحدات طول العام
هناك عدة وحدات تستخدم من قبل CSS للتعبير عن الطول. الأقدم منها ، مدعومة من جميع المتصفحات ، هي:
- rem - "r" تعني "root": "root em" - والتي تساوي حجم الخط الثابت لعنصر الجذر (دائمًا
<html>
). - vh و vw - تعتمد العديد من تقنيات تصميم الويب سريع الاستجابة بشكل كبير على قواعد النسبة المئوية. ومع ذلك ، لا تكون مقاييس النسبة المئوية CSS دائمًا أفضل حل لجميع المشكلات. يساوي التدبير vh 1/100 من ارتفاع منفذ العرض. لذلك ، على سبيل المثال ، إذا كان ارتفاع المتصفح 800 بكسل ، وقيمة 1vh تساوي 8 بكسل ، وبالمثل ، إذا كان عرض إطار العرض هو 650 بكسل ، فإن 1vw يعادل 6.5 بكسل.
- vmin و vmax - ترتبط هذه الوحدات بالقيمة القصوى أو الدنيا لـ vh و vw . على سبيل المثال ، إذا كان المتصفح قد تم تعيينه على 1200px عريضًا وكان الارتفاع 600 بكسل ، فإن 1vmin سيكون 6px وسيكون 1vmax 12px. ومع ذلك ، إذا تم ضبط العرض على 700 بكسل وتعيين الارتفاع على 1080 بكسل ، فسوف يساوي vmin 7px و vmax 10.8px.
- ex and ch - تعتمد هذه الوحدات ، مثل em و rem ، على الخط وحجم الخط الحاليين. ومع ذلك ، على عكس em و rem ، تعتمد هذه الوحدات أيضًا على
font-family
حيث يتم تحديدها استنادًا إلى إجراءات خاصة بكل خط. يتم تعريف الوحدة ch ("وحدة الأحرف") على أنها عرض الحرف صفر ("0"). يتم تعريف الوحدة السابقة بأنها "x الحالي ارتفاع الخط الحالي أو نصف 1em". ارتفاع x لخط معين هو ارتفاع "x" من هذا الخط. وغالبًا ما تكون العلامة المتوسطة للخط.
| الوحدة الوصف | | --------------- | ----------------------- | | em | 1 em هي القيمة الحسابية لحجم الخط على العنصر الذي يتم استخدامه فيه. | | ex | 1 ex هو ارتفاع الخط الحالي x. يكون x-height عادة (ولكن ليس دائمًا ، على سبيل المثال ، إذا لم يكن هناك "x" في الخط) مساوياً لارتفاع الحرف الصغير "x" | | ch | 1 ch هو تقدم الحرف الرسومي '0' (صفر) في الخط الحالي. "ch" تعني الحرف. | | rem | 1 rem هي القيمة المحسوبة لخاصية حجم الخط لعنصر المستند الأساسي | vw | 1vw هو 1٪ من عرض إطار العرض. "vw" تعني "عرض إطار العرض". | | vh | 1vh هو 1٪ من ارتفاع إطار العرض. "vh" تعني "ارتفاع إطار العرض". | | vmin | يساوي الأصغر من "vw" أو "vh" | | vmax | يساوي أكبر من "vw" أو "vh" |
هناك نوعان عامان من الوحدات المستخدمة للطول والحجم في CSS: نسبي ومطلق.
الوحدات النسبية
تتغير الوحدات النسبية نسبة إلى حجم الخط الحالي للعنصر أو إعدادات أخرى. بعض الوحدات النسبية هي
em
- عرض حرف كبير M
font-size
العنصر الحالي. - يتم تعداد أحجام الخطوط من العناصر الرئيسية.
- مثال:
html div { font-size: 16px; } div h3 { font-size: 2rem; }
هنا يساوي<h3>
32px
لأنfont-size
للعنصر الحالي أو الأصل هو 1616px
. rem
- الجذر
em
، أو عرض حرف كبير حرف M منfont-size
الأساسي الافتراضي. - لن يكون لأحجام الخطوط الأصل أي تأثير.
- مثال:
html body { font-size: 16px; } p { font-size: 1.5rem; }
هنا يساوي<p>
24px
لأنfont-size
الأساسي الافتراضي هو 1616px
. %
- حجم النسبة المئوية لحجم الوالد.
- مثال:
html div { width: 400px; } div p { width: 75%; }
نظرًا لأن عرض الوالد هو400px
، فإن عرض الخط البارد الداخلي سيكون300px
، أو 75٪ من400px
300px
. vw
- عرض العرض ، أو 1/100 من عرض إطار العرض
- مثال:
html body { width: 100vw; }
يملأbody
عرض إطار العرض ، سواء أكان 417 بكسل ، أو 690 بكسل ، أو أي عرض. vh
- أو ارتفاع العرض ، أو 1/100 من ارتفاع إطار العرض
- مثال:
html div { height: 50vh; }
سيعمل هذاdiv
على ملء نصف ارتفاع إطار العرض ، سواء كان 1080 بكسل أو 1300 بكسل أو أي ارتفاع.
وحدات مطلقة
ستكون الوحدات المطلقة هي نفسها بغض النظر عن حجم الشاشة أو الإعدادات الأخرى. بعض الوحدات المطلقة هي
px
- بكسل
- عدد البكسل ترتبط بجودة شاشة جهاز العرض
in
،cm
،mm
- بوصة ، سنتيمتر ، مليمتر
- بوصة واحدة إنش على شاشة صغيرة أو شاشة كبيرة
pt
،pc
- نقاط (1/72 من البوصة) و picas (12 نقطة)
مثال
p { font-size: 24px; } div { width: 3in; border-width: 3pt; }
ستظهر font-size: 24px
بكسل على أنها 24 بكسل على الهاتف أو الجهاز اللوحي أو شاشة سطح المكتب.
سيظهر div
بعرض 3 بوصات ، border
على div
ستكون 3/72 من سماكة بوصة ، بغض النظر عن حجم الشاشة.
معلومات اكثر:
- WebPlatforms فهم وحدات البكسل ووحدات CSS الأخرى
- MDN Web Docs - CSS Units
- دروس تصميم مواقع الإنترنت
- تعليمات HTML على وحدات CSS