---
title: Units
localeTitle: وحدات
---
## وحدات

العديد من خصائص 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` للعنصر الحالي أو الأصل هو 16 `16px` .
*   `rem`
*   الجذر `em` ، أو عرض حرف كبير حرف M من `font-size` الأساسي الافتراضي.
*   لن يكون لأحجام الخطوط الأصل أي تأثير.
*   مثال: `html body { font-size: 16px; } p { font-size: 1.5rem; }` هنا يساوي `<p>` `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)