كيفية اختيار أفضل وحدة CSS لإنشاء تخطيطات موقع أفضل

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

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

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

أنواع وحدات CSS

يمكن فصل وحدات CSS في الفئات التالية:

• الوحدات المطلقة
• الوحدات النسبية للخطوط
• الوحدات النسبية لإطار العرض

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

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

هذه الوحدات هي:

• بكسل (بكسل)
• بالبوصة)
• سم (سم)
• مم (ملليمتر)
• جهاز كمبيوتر (بيكاس)
• نقطة (نقاط)

بكسل

وحدات البكسل هي الوحدة الأكثر استخدامًا والمقبولة. ويعتبر أساس القياس للعديد من الوحدات الأخرى. يوفر النتيجة الأكثر اتساقًا بين الأجهزة المختلفة.

يبلغ ارتفاع عنصر box في المثال التالي 150 بكسل وعرضه 150 بكسل ، وسيظل كما هو في جميع أحجام الشاشات.

[المغلق]
.صندوق{
الارتفاع: 150 بكسل ؛
العرض: 150 بكسل ؛
}
[/ css]

جميع الوحدات المطلقة الأخرى مثل (بوصة) و سم (سم) و مم (ملليمتر) هي وحدات قياس واقعية مع حالات استخدام CSS قليلة جدًا في العالم الحقيقي.

لا يزال من الجيد فهم علاقتهم بالبكسل ، ومع ذلك ، فهذه هي الطريقة التي يقارنون بها:

• 1 بوصة = 96 بكسل
• 1 سم = 37.8 بكسل
• 1 مم = 3.78 بكسل

بينما ترتبط أجهزة الكمبيوتر (البيكا) و pt (النقاط) ارتباطًا مباشرًا بالبوصة.

• 1 بوصة = 72 نقطة
• 1in = 6 قطعة

يمكن توضيح العلاقة بين جميع الوحدات المطلقة على النحو التالي:

ريم

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

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

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

• م
• rem
• السابق
• الفصل

إم

إم هي وحدة طول نسبي ؛ يعتمد ذلك على حجم خط العنصر الأصل أو المستند. بشكل افتراضي ، 1em يساوي 16px إذا لم يتم تحديد font-size .

يرث Em الحجم من حجم خط الأصل المباشر. لذلك ، إذا كان للعنصر الرئيسي font-size:18px ، فسيتم قياس 1em على أنه 18px لجميع العناصر التابعة له.

هنا لدينا div .post به ثلاثة أبناء ، .post-item ، مع عنوان وبعض النص.

[لغة البرمجة]
<div class = ”post”>
<div class = ”post-item”>
<h2> العنوان </ h2>
لوريم إيبسوم هو ببساطة نص شكلي يستخدم في صناعة الطباعة والتنضيد. كان Lorem Ipsum هو النص الوهمي القياسي في الصناعة منذ القرن الخامس عشر الميلادي
</div>
<div class = ”post-item”>
<h2> العنوان </ h2>
لوريم إيبسوم هو ببساطة نص شكلي يستخدم في صناعة الطباعة والتنضيد. كان Lorem Ipsum هو النص الوهمي القياسي في الصناعة منذ القرن الخامس عشر الميلادي
</div>
<div class = ”post-item”>
<h2> العنوان </ h2>
لوريم إيبسوم هو ببساطة نص شكلي يستخدم في صناعة الطباعة والتنضيد. كان Lorem Ipsum هو النص الوهمي القياسي في الصناعة منذ القرن الخامس عشر الميلادي
</div>
</div>
[/لغة البرمجة]

الآن أصبح .post الرئيسية font-size:20px والعنصر الفرعي .post div له font-size:1.2em مع padding:0.75em margin:0.75em ، وبالتالي سيكون حجم المساحة المتروكة والهامش المحسوب 18 بكسل (20 بكسل) * 1.2em * 0.75em).

[المغلق]
لغة البرمجة{
حجم الخط: 20 بكسل ؛
}

.بريد{
حجم الخط: 20 بكسل ؛
}

.post div {
حجم الخط: 1.2em ؛
}

.post-item {
الخلفية: وردي ؛
الحشو: 0.75em ؛
الهامش: 0.75em ؛
}

.post-item h2 {
حجم الخط: 1.5em ؛
الهامش: 0.5em 0 ؛
}

.post-item p {
الهامش: 0؛
حجم الخط: 1em ؛
}
[/ css]

كما ترى ، ترث العناصر الفرعية القيم من الأصل.

تتمثل ميزة استخدام em في أنه إذا قررت تغيير font-size padding margin لكل عنصر بشكل متناسب ، فحينئذٍ عليك فقط تغيير حجم خط العنصر الأصلي وسيتم تعديل جميع العناصر الأخرى وفقًا لذلك.

لن يكون هذا هو الحال مع الوحدات المطلقة مثل px ، حيث يتعين عليك ضبط كل عنصر على حدة.

قد تكون إدارة طبيعة الوراثة هذه صعبة بعض الشيء ، ومع ذلك ، إذا كان للعناصر المتداخلة font-size خاص بها في em أيضًا.

كما في العرض السابق ، إذا قمت بلف العنوان والفقرة داخل div آخر في أحد العناصر الفرعية ، فسترى نتائج غريبة.

[لغة البرمجة]
<div class = ”post-item”>
<div>
<h2> العنوان </ h2>
لوريم إيبسوم هو ببساطة نص شكلي يستخدم في صناعة الطباعة والتنضيد. كان Lorem Ipsum هو النص الوهمي القياسي في الصناعة منذ القرن الخامس عشر الميلادي
</div>
</div>
[/لغة البرمجة]

نظرًا لأن post-item يحتوي على div مدمج ، سيتغير الحجم الأساسي من 24 بكسل إلى 28.8 بكسل (20 بكسل * 1.2em * 1.2em) ، وسيتغير font-size margin لـ h2 إلى 43.2 بكسل (20 بكسل * 1.2em * 1.2em * 1.5em) و 14.4 بكسل (20 بكسل * 1.2em * 1.2em * 0.5em) ، على التوالي.

ريم

يمكن أن يكون Rem مفيدًا حقًا في هذه الأنواع من المواقف لأنها تشير دائمًا إلى حجم خط عنصر الجذر ، وليس العنصر الأصلي.

إذا أخذت المثال السابق وقمت بتغيير الوحدات من em إلى rem لـ .post div ، فسترى جميع العناصر الفرعية تصلح نفسها.

[المغلق]
.post div {
حجم الخط: 1.2rem ؛
}
[/ css]

بمجرد تغيير الوحدة من em إلى rem ، تتغير قاعدتها من div الأصل إلى عنصر الجذر ، والذي له front-size:20px .

لذلك ، سيكون الحساب بقيمة 20 بكسل * 1.2rem * وسيكون لكل من h2 و p font-size margin ثابت ، بغض النظر عن الأصل.

السابق

يرتبط Ex بارتفاع x للخط الحالي ونادرًا ما يتم استخدامه. قياس x-height غير متسق ؛ في بعض الأحيان يأتي من الخط نفسه وأحيانًا يحسب المتصفح نفسه.

مثل em و rem ، يعتمد الأمر على الخط ولكن الاختلاف الرئيسي هو أن ex سيتغير عند تغيير font-family أيضًا ، وهذا ليس هو الحال مع الأخريين.

[المغلق]
.صندوق{
العرض: 150 كس ؛
الارتفاع: 150 كس ؛
}
[/ css]

الفصل

إن Ch مشابه لـ ex ولكنها لا تعتمد على x-height ؛ بدلاً من عرض حرف الصفر (0). يتغير أيضًا مع font-family .

[المغلق]
.صندوق{
العرض: 150 قناة ؛
الارتفاع: 150 قناة ؛
}
[/ css]

الوحدات النسبية في منفذ العرض

هناك عدد قليل من الوحدات التي تعتمد على ارتفاع منفذ العرض وحجم العرض ، مثل:

• vh (ارتفاع منفذ العرض)
• فولكس فاجن (عرض منفذ العرض)
• vmin (الحد الأدنى لإطار العرض)
• vmax (منفذ العرض الأقصى)

ف

يتم قياس Vh (ارتفاع منفذ العرض) على أنه 1vh يساوي 1٪ من ارتفاع منفذ العرض. هذه الوحدة مفيدة جدًا لإنشاء عناصر ارتفاع كاملة. يتفاعل Vh بشكل مشابه مع النسبة المئوية ، لكنه لا يعتمد على ارتفاع العنصر الأصل.

يمكنك استخدام vh في أي مكان ولكن حالة الاستخدام الأكثر شيوعًا لـ vh هي إنشاء عناصر كاملة الارتفاع. في هذا المثال ، ستنشئ فئة full-height حاوية زرقاء تكون بارتفاع 100٪ من منفذ العرض.

[المغلق]
.ارتفاع كامل{
الارتفاع: 100 فولت
الخلفية: أزرق ؛
}
[/ css]

فولكس فاجن

يشبه Vw (عرض منفذ العرض) vh ولكنه يأخذ في الاعتبار عرض إطار العرض بدلاً من ارتفاعه. 1vw يساوي 1٪ من عرض منفذ العرض. يمكن أن تكون هذه الوحدات مفيدة حقًا إذا كنت تريد إنشاء إطار عرض سريع الاستجابة بناءً على أسلوب الطباعة.

في هذا المثال ، font-siz لـ h1 6٪ من عرض منفذ العرض ، لذلك إذا كان عرض منفذ العرض 1000 بكسل ، فسيكون حجم الخط 60 بكسل ، وإذا كان إطار العرض 500 بكسل ، فسيكون حجم الخط 30 بكسل.

[المغلق]
h1 {
حجم الخط: 6vw ؛
}
[/ css]

Vmin

يتم حساب Vmin على أساس الحد الأدنى لقيمة عرض أو ارتفاع منفذ العرض ، أيهما أصغر. لنفترض أن لديك حجم منفذ عرض يبلغ 1000 بكسل طولًا × 800 بكسل عرضًا. 1vmin سيساوي 8 بكسل.

في ماكس

يتم حساب Vmax تمامًا على عكس vmin ، حيث يتم اعتبار القيمة القصوى لإطار العرض.

مثل مثال منفذ العرض السابق الذي يبلغ طوله 1000 بكسل وعرضه 800 بكسل ، 1vmax سيكون مساويًا لـ 10 بكسل.

الآن دعنا نستكشف كيف يمكنك استخدام vmin و vmax بفعالية. باستخدام مثالنا السابق ، لنفترض أننا نريد أن يكون لدينا حشوة وهامش مرن بناءً على حجم منفذ العرض الآن ، بدلاً من قيمة ثابتة.

في مقتطف الشفرة هذا ، قمت بتعيين المساحة المتروكة على 3vmax والهامش على 1.5vmin .

[المغلق]
.post-item {
خلفية الوردي.
الحشو: 3vmax.
الهامش: 1.5vmin ؛
}
[/ css]

ستتغير المساحة المتروكة والهامش وفقًا لحجم منفذ العرض.

النسبة المئوية (٪) وحدة

لا تنتمي وحدة النسبة المئوية (٪) إلى أي فئة معينة مذكورة أعلاه ، ولكن يمكن تصنيفها كوحدة نسبية. إنه نسبي لعنصره الأصلي.

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

تعتبر النسبة المئوية واحدة من أكثر الوحدات فائدة لإنشاء تخطيط سريع الاستجابة أو مرن. تستخدم الأطر الشائعة مثل Bootstrap و Foundation و Bulma النسبة المئوية لتخطيطها الأساسي.

هنا ستكون فئة full-width بعرض 100٪ لعنصرها الأصلي.

[المغلق]
.full-width {
العرض: 100٪؛
}
[/ css]

خاتمة

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

إذن ، ما الوحدات التي تستخدمها كثيرًا للحصول على النتيجة المرجوة؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه!