80 lines
6.9 KiB
Markdown
80 lines
6.9 KiB
Markdown
---
|
|
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) |