دليل وحدة CSS: شرح CSS em و rem و vh و vw والمزيد

الوحدات

العديد من الخصائص مثل 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 . على سبيل المثال ، إذا تم ضبط المتصفح على 1200 بكسل عرضًا وكان الارتفاع 600 بكسل ، فسيكون 1vmin 6 بكسل و 1 vmax سيكون 12 بكسل. ومع ذلك ، إذا تم ضبط العرض على 700 بكسل والارتفاع مضبوطًا على 1080 بكسل ، فإن vmin سيساوي 7 بكسل و vmax 10.8 بكسل.
  • ex و ch - تعتمد هذه الوحدات ، المشابهة لـ em و rem ، على الخط وحجم الخط الحاليين. ومع ذلك ، على عكس em و rem ، تعتمد هذه الوحدات أيضًا علىfont-familyحيث يتم تحديدها بناءً على مقاييس خاصة بكل خط. و CH يعرف وحدة ( "وحدة الطابع")، وعرض للحرف صفر ( "0"). و السابقين وتعرف وحدة باسم "الحالي الأشعة ارتفاع الخط الحالي أو نصف 1em". الارتفاع- x لخط معين هو ارتفاع الحرف الصغير "x" لهذا الخط. غالبًا ما تكون العلامة الوسطى للخط.

هناك نوعان عامان من الوحدات المستخدمة للطول والحجم في CSS: النسبية والمطلقة.

الوحدات النسبية

تتغير الوحدات النسبية بالنسبة إلى حجم الخط الحالي للعنصر أو الإعدادات الأخرى. بعض الوحدات النسبية

em

  • عرض الحرف الكبير M font-sizeللعنصر الحالي.
  • يتم توارث أحجام الخطوط من العناصر الأصل.

مثال:

div { font-size: 16px; } div h3 { font-size: 2rem; }

هنا

سوف يساوي 32pxلأن font-sizeالعنصر الحالي أو الأصل هو 16px.

rem

  • الجذر em، أو عرض الحرف الكبير M للقاعدة الافتراضية font-size.
  • لن يكون لأحجام الخطوط الأصل أي تأثير.

مثال:

body { font-size: 16px; } p { font-size: 1.5rem; }

هنا

سوف يساوي 24pxلأن الأساس الافتراضي font-sizeهو 16px.

%

  • حجم النسبة المئوية بالنسبة لحجم الوالدين.

مثال:

div { width: 400px; } div p { width: 75%; }

نظرًا لأن عرض الأصل هو 400px، فسيكون عرض الرسم البياني الداخلي 300px، أو 75٪ من 400px.

vw

  • عرض العرض ، أو 1/100 من عرض منفذ العرض

مثال:

body { width: 100vw; }

و bodyملء العرض من العرض، سواء كان ذلك 417px، 690px، أو أي عرض.

vh

  • عرض الارتفاع ، أو 1/100 من ارتفاع منفذ العرض

مثال:

div { height: 50vh; }

divسيملأ هذا نصف ارتفاع منفذ العرض ، سواء كان ذلك 1080 بكسل أو 1300 بكسل أو أي ارتفاع.

الوحدات المطلقة

ستكون الوحدات المطلقة هي نفسها بغض النظر عن حجم الشاشة أو الإعدادات الأخرى. بعض الوحدات المطلقة

px

  • بكسل
  • عدد البكسل يتعلق بجودة شاشة جهاز العرض

inو cmوmm

  • بوصة ، سم ، ملليمتر
  • البوصة هي البوصة على شاشة صغيرة أو شاشة كبيرة

ptو pc

  • النقاط (1/72 من البوصة) والبيكاس (12 نقطة)

مثال

p { font-size: 24px; } div { width: 3in; border-width: 3pt; }

font-size: 24pxستظهر فقرة بها 24 بكسل على شاشة الهاتف أو الجهاز اللوحي أو سطح المكتب.

و divسوف تظهر الى 3 بوصة واسعة، و borderعلى divأن تكون 3/72 بوصة سميكة، بغض النظر عن حجم الشاشة.