وحدات الطول في CSS

المقدمة

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

في CSS، هناك العديد من وحدات الطول التي يمكن استخدامها، ولكل وحدة خصائص واستخدامات مختلفة. في هذا المقال، سنستعرض كل وحدة طول متاحة في CSS وكيف يمكن استخدامها.

بكسل (CSS (px

وحدة البكسل (px) هي وحدة القياس الأكثر استخداماً في تطوير الويب. بكسل CSS هو نقطة ضوئية على الشاشة. يتم استخدام البكسلات في العديد من الخصائص في CSS، بما في ذلك الحجم، الارتفاع، العرض، المسافات البادئة واللاحقة، وغيرها.

القيمة الافتراضية للعديد من الخصائص في CSS تكون في البكسلات. إليك مثال:

div {
  width: 300px;
  height: 200px;
}

في هذا المثال، تم تعيين العرض والارتفاع للعنصر div بواسطة وحدات البكسل.

بوصة CSS (in)

تعد البوصة (in) وحدة قياس في CSS، ولكنها غير شائعة الاستخدام في تصميم الويب. واحدة بوصة تساوي تقريبا 96 بكسل. في الأجهزة مع دقة الشاشة المعتادة، سيكون هذا دقيقاً، ولكن في الشاشات عالية الدقة، قد يكون هناك اختلاف.

تستخدم البوصة عادة في مجال الطباعة، حيث يكون القياس الفعلي مهماً، ولكن في تصميم الويب، نادراً ما تستخدم البوصة. إليك مثال على كيفية استخدام البوصات في CSS:

div {
  width: 2in;
  height: 3in;
}

في هذا المثال، تم تعيين العرض والارتفاع للعنصر div بواسطة وحدات البوصة.

سنتيمترات CSS (cm)

وحدة السنتيمتر (cm) في CSS تشبه إلى حد كبير وحدة البوصة، حيث أنها تتعامل مع الأبعاد الفعلية على الشاشة. ومع ذلك، يُشدد على أن استخدام السنتيمترات في تصميم الويب ليس شائعًا وقد يتسبب في تحديات عند عرض الصفحات على شاشات مختلفة الدقة.

تُعادل وحدة السنتيمتر تقريبًا 37.8 بكسل. وكما هو الحال مع البوصة، يُفضل عادة استخدام السنتيمترات في الطباعة بدلاً من تصميم الويب. إليك مثال على كيفية استخدام السنتيمترات في CSS:

div {
  width: 5cm;
  height: 10cm;
}

في هذا المثال، تم تعيين العرض والارتفاع للعنصر div بواسطة وحدات السنتيمتر.

مليمترات CSS (mm)

وحدة المليمتر (mm) في CSS هي وحدة أخرى تتعامل مع الأبعاد الفعلية، لكنها أصغر من السنتيمتر. واحد مليمتر يعادل تقريباً 3.78 بكسل.

مثل البوصة والسنتيمتر، لا يُفضل عادة استخدام المليمترات في تصميم الويب، حيث أن القياسات البكسلية أو النسبية توفر تحكماً أفضل في الأبعاد على مجموعة متنوعة من الشاشات. لكن، في الطباعة، يمكن أن تكون الوحدات المليمترية مفيدة. إليك مثال على كيفية استخدام المليمترات في CSS:

div {
  width: 50mm;
  height: 100mm;
}

في هذا المثال، تم تعيين العرض والارتفاع للعنصر div بواسطة وحدات المليمتر.

نقاط CSS (pt)

وحدة النقاط (pt) هي وحدة قياس تستخدم في التصميم المطبوع وتطبيقات تحرير النصوص. واحدة نقطة تعادل تقريبًا 1.33 بكسل. هذا النوع من الوحدات يستخدم أكثر في الطباعة من تصميم الويب، ولكن ما زال من الممكن استخدامه في CSS.

يُفضل عادة الابتعاد عن استخدام النقاط في تصميم الويب وذلك لأن البكسلات والوحدات النسبية توفر تحكمًا أفضل في التصميم. ولكن إذا كنت تعمل مع مستند يجب طباعته، فقد يكون النقطة هو الخيار الأمثل لك. إليك مثال على كيفية استخدام النقاط في CSS:

div {
  font-size: 12pt;
}

في هذا المثال، تم تعيين حجم الخط للعنصر div بواسطة وحدات النقاط.

بيكاس CSS (pc)

البيكا (pc) هي وحدة قياس تستخدم في الطباعة، وتُعادل حوالي 16 بكسل. كل بيكا تحتوي على 12 نقطة، لذا فإنها أكبر من النقطة وتُستخدم في الطباعة للقياسات الأكبر حجمًا.

مثل النقاط والسنتيمترات والبوصات، لا يُفضل عادة استخدام البيكاس في تصميم الويب. لكن في بعض الحالات، مثل تصميم الكتب والمجلات، قد تكون البيكا خيارًا جيدًا. إليك مثال على كيفية استخدام البيكا في CSS:

div {
  width: 10pc;
  height: 20pc;
}

في هذا المثال، تم تعيين العرض والارتفاع للعنصر div بواسطة وحدات البيكا.

النسبة المئوية CSS (%)

النسبة المئوية (%) هي وحدة نسبية في CSS تُستخدم بشكل شائع للغاية. تُعتبر النسبة المئوية من الوحدات الأكثر مرونة، حيث أنها تغير حجمها تبعًا للحاوية الأم.

عند استخدام النسبة المئوية، يتم تحديد القيمة بناءً على نسبة من الحاوية الأم. فمثلاً، إذا كان لديك عنصر div بعرض 500 بكسل، وكان لديك عنصر آخر داخله مع العرض المحدد بنسبة 50%، فإن العنصر الداخلي سيكون بعرض 250 بكسل.

.parent {
  width: 500px;
}

.child {
  width: 50%;
}

في هذا المثال، يكون عنصر الطفل (child) بنصف عرض العنصر الأم (parent). النسب المئوية مفيدة لإنشاء تصميمات رد الفعل وتكييفها مع حجم الشاشة.

وحدة em في CSS

الوحدة ’em’ في CSS هي وحدة نسبية تعتمد على حجم الخط الحالي. إذا كان حجم الخط هو 16 بكسل، فإن 1em سيكون 16 بكسل. يُستخدم ’em’ بشكل شائع في تصميم الويب لأنه يسمح بمرونة أكبر في تكييف العناصر مع حجم الخط.

تستخدم الوحدات ’em’ في العديد من المواقع على الويب لأنها تتيح تكييف العناصر بشكل جيد مع حجم الخط وتغييرات الشاشة. إليك مثال على كيفية استخدام ’em’ في CSS:

body {
  font-size: 16px;
}

div {
  width: 10em;  /* equals 160px */
  height: 5em;  /* equals 80px */
}

في هذا المثال، تم تعيين حجم الخط للعنصر body بـ 16 بكسل. بالتالي، العرض والارتفاع للعنصر div تم تعيينهما بواسطة ’em’, الذي يتكيف مع حجم الخط في العنصر body.

وحدة rem في CSS

وحدة ‘rem’ في CSS تشبه الوحدة ’em’، ولكنها ترتبط دائمًا بحجم الخط الجذري (العنصر html)، بدلاً من الحاوية الأم. هذا يعني أن ‘1rem’ سيكون دائمًا متساوياً لحجم الخط الذي تم تعيينه للعنصر html.

تُستخدم وحدات ‘rem’ لتوفير المزيد من الثبات في التصميم، لأنها لا تتأثر بالتغييرات في حجم الخط التي قد تطبق على العناصر الأم. إليك مثال على كيفية استخدام ‘rem’ في CSS:

html {
  font-size: 16px;
}

div {
  width: 10rem;  /* equals 160px */
  height: 5rem;  /* equals 80px */
}

في هذا المثال، تم تعيين حجم الخط للعنصر html بـ 16 بكسل. بالتالي، العرض والارتفاع للعنصر div تم تعيينهما بواسطة ‘rem’, الذي يتكيف مع حجم الخط في العنصر html.

وحدة x-height (ex) في CSS

وحدة ‘ex’ في CSS هي وحدة نسبية مرتبطة بحجم الخط المستخدم. وهي تمثل ارتفاع الحرف ‘x’ الصغير في الخط الحالي. وبالتالي، يمكن أن تختلف قيمة ‘1ex’ بشكل كبير بناءً على الخط المستخدم.

يُستخدم ‘ex’ أقل بكثير من ’em’ و ‘rem’، لكنها قد تكون مفيدة في بعض السياقات، خاصة عند العمل مع الخطوط المختلفة التي قد تحتوي على ارتفاعات ‘x’ مختلفة.

إليك مثال على كيفية استخدام ‘ex’ في CSS:

body {
  font-size: 16px;
}

div {
  width: 10ex;  /* Width based on the 'x' height of the font */
  height: 5ex;  /* Height based on the 'x' height of the font */
}

في هذا المثال، تم تعيين حجم الخط للعنصر body بـ 16 بكسل. بالتالي، العرض والارتفاع للعنصر div تم تعيينهما بواسطة ‘ex’, الذي يتكيف مع ارتفاع الحرف ‘x’ في الخط المستخدم.

وحدة character (ch) في CSS

وحدة ‘ch’ في CSS هي وحدة نسبية تمثل عرض حرف “0” (صفر) للخط المستخدم. هذا يجعلها مفيدة بشكل خاص للتحكم في العرض عند التعامل مع النص، حيث يمكن أن يساعد في الحفاظ على مقدار معين من الأحرف في كل سطر.

body {
  font-size: 16px;
}

div {
  width: 20ch;  /* Width based on the '0' character width of the font */
}

في هذا المثال، العرض للعنصر div تم تعيينه بواسطة ‘ch’, الذي يتكيف مع عرض الحرف ‘0’ في الخط المستخدم. النتيجة هي أن العنصر div سيحاول الاحتفاظ بحوالي 20 حرفًا في كل سطر، بغض النظر عن حجم الخط.

وحدة viewport width (vw) في CSS

وحدة ‘vw’ في CSS تمثل نسبة مئوية من عرض viewport. ‘1vw’ يساوي 1% من عرض viewport. هذا يعني أن ‘100vw’ سيكون دائمًا متساوياً للعرض الكامل لـ viewport، بغض النظر عن حجم الشاشة أو الجهاز.

وحدات ‘vw’ مفيدة للغاية لإنشاء تصميمات مستجيبة، حيث يمكنها الضبط تلقائيًا بناءً على حجم الشاشة. إليك مثال على كيفية استخدام ‘vw’ في CSS:

div {
  width: 50vw;  /* equals 50% of the viewport width */
  height: 30vw;  /* equals 30% of the viewport width */
}

في هذا المثال، تم تعيين العرض والارتفاع للعنصر div بواسطة ‘vw’. سيتم تعديل الأبعاد تلقائيًا بناءً على حجم الشاشة.”

وحدة viewport height (vh) في CSS

وحدة ‘vh’ في CSS تمثل نسبة مئوية من ارتفاع viewport. ‘1vh’ يساوي 1% من ارتفاع viewport. هذا يعني أن ‘100vh’ سيكون دائمًا متساوياً للارتفاع الكامل لـ viewport، بغض النظر عن حجم الشاشة أو الجهاز.

وحدات ‘vh’ مفيدة بشكل خاص للتحكم في الارتفاع في تصميمات المواقع الإلكترونية، حيث يمكنها الضبط تلقائيًا بناءً على حجم الشاشة. إليك مثال على كيفية استخدام ‘vh’ في CSS:

div {
  width: 50vh;  /* equals 50% of the viewport height */
  height: 30vh;  /* equals 30% of the viewport height */
}

في هذا المثال، تم تعيين العرض والارتفاع للعنصر div بواسطة ‘vh’. سيتم تعديل الأبعاد تلقائيًا بناءً على حجم الشاشة.”

خاتمة

في هذا المقال، تعرفنا على مجموعة من وحدات الطول في CSS، والتي تتراوح بين البكسل والإنش والسنتيمتر، إلى النسب المئوية وem وrem وex وch وvw وvh. كل وحدة لها استخداماتها الفريدة، والتي تعتمد بشكل كبير على المتطلبات الخاصة بتصميم الموقع الإلكتروني والتجربة التي تسعى لتقديمها للمستخدمين. الفهم الجيد لهذه الوحدات سيمكنك من تصميم مواقع إلكترونية أكثر مرونة واستجابة.

أسئلة متداولة