---
title: Units
localeTitle: وحدات
---
## وحدات
العديد من خصائص CSS مثل `width` ، `margin` ، `padding` ، `font-size` إلخ. يحتوي CSS على طريقة للتعبير عن الطول في وحدات متعددة. الطول عبارة عن مزيج من رقم ووحدة بدون مسافات بيضاء. على سبيل المثال ، `5px` و `0.9em` ذلك
### الطول
#### وحدات طول العام
هناك عدة وحدات تستخدم من قبل CSS للتعبير عن الطول. الأقدم منها ، مدعومة من جميع المتصفحات ، هي:
* **rem** - "r" تعني "root": "root em" - والتي تساوي حجم الخط الثابت لعنصر الجذر (دائمًا `` ).
* **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; }` هنا يساوي `` `32px` لأن `font-size` للعنصر الحالي أو الأصل هو 16 `16px` .
* `rem`
* الجذر `em` ، أو عرض حرف كبير حرف M من `font-size` الأساسي الافتراضي.
* لن يكون لأحجام الخطوط الأصل أي تأثير.
* مثال: `html body { font-size: 16px; } p { font-size: 1.5rem; }` هنا يساوي `
` `24px` لأن `font-size` الأساسي الافتراضي هو 16 `16px` .
* `%`
* حجم النسبة المئوية لحجم الوالد.
* مثال: `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 الأخرى](https://webplatform.github.io/docs/tutorials/understanding-css-units/)
* [MDN Web Docs - CSS Units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units)
* [دروس تصميم مواقع الإنترنت]('https://webdesign.tutsplus.com/articles/7-css-units-you-might-not-know-about--cms-22573)
* [تعليمات HTML على وحدات CSS](http://www.htmlhelp.com/reference/css/units.html)