الإنتقال للتصميم الجديد
تأسيس نفسك وتطويرها ماله وقت أو مناسبة محددة 😎 خصم 45% على جميع الدورات والمسارات .,
استخدم كوبون: JU22
الوقت المتبقي: 0يوم 0ساعة 0دقيقة 0ثانية

وحدات القياس في css و أنواعها - px, pt, em and rem .. etc

من مجتمع دورة تصميم صفحات الإنترنت CSS HTML

لربما لاحظت في بحثك عبر محرك البحث قوقل كود css يستخدم وحدة قياس rem أو em للتعبير عن الطول أو الإرتفاع، أو padding و غيرهما، أو ربما لاحظت إحدى هذه وحدتين عند استخدامك لكلاسات من مكتبة bootstrap أو غيرها من المكتبات المشهورة، لا تقلق فالأمر بسيط جدًا و ليس مُعقّد.

 

في البداية سأخبرك بأن هُناك نوعين من وحدات القياس :

نوع الأول و هي : وحدات القياس المطلقة Absolute lengths units : أي إنها ثابتة في قيمتها و لا تتأثر بعنصر الأب في طولها و عرضها، و هي كالتالي :

وحدة القياس cm : و المقصود بها سنتيمتر، إحدى استخداماتها في css لصفحات المخصصة للطباعة لوضع قياسات ورقة A4 أو غيرها.

وحدة القياس mm : و المقصود بها مليمتر، فواحد 1 سنتيمتر يساوي 10 مليمتر.

وحدة القياس in : و المقصود بها انش inch، فواحد 1 انش يساوي 96 بكسل و يساوي 2.54 سنتيمتر.

وحدة القياس pt : و المقصود بها نقطة point، ف 72 نقطة تساوي 1 انش، و هي تستخدم غالبًا في الرسومات و أحيانًا مع الخطوط، و الذين يعرفون لبرامج التصميم مثل الفوتوشوب يعرفون هذه الوحدة.

وحدة القياس px : و هي من أشهر وحدات القياس المستخدمة في css، و هي الوحدة التي يتم بها قياس شاشات الكمبيوتر و دقّتها.

 

نوع الثاني : وحدات القياس النسبية Relative lengths units : و هي وحدات تأخذ القيمة و تقيسها نسبيًا على عنصر الأب أو العنصر الرئيسي "html" ..

وحدة القياس المئوية % : و هي وحدة قياس تتأثر مع أطوال عنصر الأب "الذي يحتوي عنصرنا الحالي"، أيّ في حالة كان عنصر الأب لديه طول العرض width الخاص به 400px بكسل، و قيمة طول العرض عنصرنا الحالي 50%، فهذا يعني إن طول عرض عنصرنا 200px بكسل، لأن 1% يساوي 4px بكسل، فالمعادلة تُصبح كالتالي :

4px بكسل × %50 = 200px بكسل

وحدة القياس em :  هي وحدة قياس تتأثر بحجم الخط font-size للعنصر الحالي أو عنصر الأب، أي لو كان لدينا عنصر له حجم خط يساوي 18px بكسل و وضعنا له طول العرض 1em فهذا يعني طول العرض عنصرنا الحالي 18px بكسل، فيعني في حالة وضعنا قيمة طول العرض أو الإرتفاع 3em تصبح المعادلة كالتالي :

18px بكسل× 3 = 54px بكسل

مثال على إستخدام وحدة em  مع حجم الخط للعنصر نفسه:

<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>em self</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        *, body {
            margin: 0;
            padding: 0;
        }

        .container {
            padding: 10px 10px;
        }

        .bg-primary {
            background-color: #17191A;
        }

        .example-em-self {
            font-size: 18px;
            padding: 0.5em 1em; /* 0.5em = 9px | 1em = 18px */
            background-color: #014c69;
            color: #ffffffc9;
        }
    </style>
</head>
<body class="bg-primary">
    <div class="container">
        <span class="example-em-self">
            Flexcourses | suleiman
        </span>
    </div>
</body>
</html>

كما ننلاحظ بأن عنصرنا الحالي يمثّله كلاس example-em-self و الذي أعطيناه حجم الخط 18px بكسل، ثم استخدمنا وحدة em مع padding، فبالتالي أصبحت قيمة padding :

0.5em = 9px

1em = 18px

 

مثال على إستخدام وحدة em  مع حجم الخط للعنصر الأب :

<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>em parent</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        *, body {
            margin: 0;
            padding: 0;
        }

        .container {
            padding: 10px 10px;
        }

        .bg-primary {
            background-color: #17191A;
        }

        .parent {
            font-size: 18px;
            color: #ffffffc9;
        }
        .child {
            background-color: #014c69;
            padding: 1.5em 3em; /* 1.5em = 27px | 3em = 54px */
        }
    </style>
</head>
<body class="bg-primary">
    <div class="container">
        <span class="parent">
            <span class="child">
                Flexcourses | suleiman
            </span>
        </span>
    </div>
</body>
</html>

كما نلاحظ بأن عنصرنا الحالي يستخدم كلاس child و العنصر الأب الذي يحتوي على عنصر child يستخدم كلاس parent، و حجم الخط تم وضعه للأب و ليس للابن، مع ذلك تم أخذ قيّم padding و تأثرها بحجم الخط الخاص بالعنصر الأب.

وحدة القياس rem : هي وحدة قياس كسابقتها و لكن تتأثر بالعنصر الرئيسي "الجذر" root element و هو html و ليس بالعنصر الأب.

مثال على إستخدام وحدة rem :

<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>rem unit</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        *, body {
            margin: 0;
            padding: 0;
        }
        * {
            font-size: 37px;
        }

        .container {
            padding: 10px 10px;
        }

        .bg-primary {
            background-color: #17191A;
        }

        .title {
            background-color: #014c69;
            color: #ffffffc9;
            font-size: 2rem; /* 2rem = 74 */
            padding: 0.3rem 0.7rem;
        }
    </style>
</head>
<body class="bg-primary">
    <div class="container">
        <span class="title">
           Flexcourses
        </span>
    </div>
</body>
</html>

يمكن وصول للعنصر الرئيسي عبر علامة * ثم الأقواس المعكوفة أو بكتابة اسم العنصر الرئيسي html، في مثالنا الحالي استخدمت علامة النجمة للتوضيح، كما تلاحظون تم وضع حجم الخط للعنصر الرئيسي 37px بكسل و استخدمنا وحدة قياس rem لكلاس title و وضع قيمة 2rem، و النتيجة ستكون 74px بكسل، 2 × 37 = 74

 

وحدتي القياس vh و vw : و هي وحدة قياس تتأثر نسبيًا مع طول العرض و الإرتفاع لنافذة المتصفح نفسه، ف vw هي إختصار لـ viewport of width،

و كذلك vh هي إختصار لـ viewport of height، فإذًا كيف تُقاس نسبيًا؟ إذا كان طول العرض للمتصفح يساوي 1980px بكسل مثلًا، ف 1% ل vw يساوي 19.8 بكسل

 

الفرق بين وحدتي vh - vw و النسبة المئوية % :

وحدتي القياس vh و vw تتأثر بطول العرض و الإرتفاع  لنافذة المتصفح نفسها، بينما النسبة المئوية للعنصر تتأثر بطول  العرض و الإرتفاع لعنصر الأب الذي يحتويها.

هنا مثال بسيط يوضّح الفرق عمليًا بينهما :

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Units</title>
    <style>
      *, body {
        margin: 0;
        padding: 0;
      }
      
      .parent-units {
        height: 300px;
        width: 500px;
        border: 3px solid #efefef;
        border-radius: 3px;
      }
      .container {
        padding: 10px 10px;
      }

      .bg-primary {
        background-color: #17191A;
      }

      .bg-secondary {
        background-color: #014c69;
        padding: 10px;
      }
      .text-primary {
        color: #ffffffc9;
      }
      .text-center {
        text-align: center;
      }
      .rounded {
        border-radius: 3px;
      }
      .my-2 {
        margin-top: 1rem;
        margin-bottom: 1rem;
      }
      .wv-30 {
        width: 30vw; /* viewport width */
      }
      .wp-30 {
        width: 30%; /* 10 percent width */
      }

    </style>
  </head>
  <body class="bg-primary">
    <div class="container bg-primary">
      <div class="bg-secondary text-primary rounded my-2 wv-30">
        30 width viewport unit
      </div>
      <div class="bg-secondary text-primary rounded my-2 wp-30">
        30% percent unit
      </div>
      
      <div class="parent-units">
        <h3 class="text-primary text-center"> Inside container : 500px</h3>
        <div class="bg-secondary text-primary wp-30 my-2">30 percent unit</div>
        <div class="bg-secondary text-primary wv-30 my-2">30% witdh viewport unit</div>
      </div>

    </div>
  </body>
</html>

صورة للتوضيح :

DFSVP4GfnRRRMQ3N0KVX7RTa74wfaDhzPfkaVTo0.png

 

ملاحظة : حجم الخط الإفتراضي لعنصر الرئيسي "الجذر - root" هو 16px بكسل في أغلب المُتصفحات.

 

في النهاية : هُناك وحدات لم أذكرها لعدة أسباب، من ضمنها لقلّة إستخدامها و كذلك لأنها مذكورة في المصادر التي أرفقتها في آخر الموضوع.

 

المصادر :

w3schools - CSS Units

CSS values and units - Learn web development | MDN

الردود
تظهر النقاشات للطلاب المشتركين فقط