وحدات إطار العرض مقابل النسب المئوية. دليل سريع لوحدات CSS

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

تأتي وحدات CSS في نوعين: مطلقة ونسبية.

وحدات الطول المطلقة في CSS

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

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

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

• سم (سم)؛
• مم (مم) ؛
• بالبوصة)؛
• الكمبيوتر (القمم)؛
• حزب العمال (نقاط)؛
• بكسل (بكسل).

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

وحدات الطول النسبي في CSS

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

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

تشير الوحدات النسبية الخاصة بالخط إلى حجم خط محدد مسبقًا أو قيمة خاصية عائلة الخطوط:

• على سبيل المثال (ارتفاع الحرف س)؛
• الفصل( عرض الحرف صفر (0));
• وحدة em في CSS (ارتفاع خط العنصر الحالي);
• ريم ( حجم خط العنصر الجذر).

السابق

معرف ك " ارتفاع الحرف x للخط الحالي أو نصف 1 em" أي ارتفاع الحرف الصغير x الخط المثبت. عندما تقوم بتغيير قيمة خاصية عائلة الخطوط، تتغير الوحدة السابقة.

الفصل

يساوي عرض الحرف 0 . تتغير وحدة القياس هذه أيضًا عندما تتغير قيمة خاصية عائلة الخطوط.

م

وحدة CSS em لها قيمة مساوية لحجم خط النص أو العنصر الأصلي. على سبيل المثال، إذا كان حجم خط العنصر الأصلي هو 30 بكسل، فسيتم حساب قيمة 1em على أنها 30 بكسل (30 × 1) لجميع العناصر الفرعية. ليس من الضروري أن يكون الرقم عددًا صحيحًا. إذا استبدلنا في المثال 1em بـ 0.5، فستكون القيمة 15 بكسل (30 × 0.5).

تأخذ الوحدة em قيمة العلامة الأصلية. يمكن أن يؤدي هذا إلى نتائج غير مرغوب فيها عند استخدام العناصر المتداخلة.

لنفترض أن لدينا ثلاثة عناصر متداخلة. يبلغ حجم خط العنصر الأول (الجذر) 30 بكسل، ويبلغ حجم خط العنصرين المتداخلين 2em. سيكون للعنصر المتداخل داخل الجذر حجم خط يُحسب بـ 60 بكسل (30 × 2). وسيكون للعنصر المتداخل داخله حجم خط يُحسب بـ 120 بكسل (60 × 2).

rem

rem يشبه CSS em، لكن قيمته تظل دائمًا مساوية لحجم خط العنصر الجذر. تعتبر وحدة rem مفيدة عند تطوير مواقع الويب سريعة الاستجابة لأنها تتيح لك توسيع نطاق الصفحة بأكملها عن طريق تغيير حجم الخط في عنصر HTML.

تعتمد وحدات الطول المئوية على حجم إطار العرض

تعتمد منطقة العرض على عرض إطار العرض وارتفاعه، وتتضمن ما يلي:

• vh( ارتفاع منفذ العرض);
• فولكس فاجن ( عرض إطار العرض);
• vmin( أصغر من (فولكس فاجن، vh));
• ماكس ( أعظم من (فولكس فاجن، vh)).

فولكس فاجن

هذا هو عرض إطار العرض. 1vw يساوي 1/100 من عرض إطار العرض. تشبه إلى حد ما النسب المئوية، إلا أن القيمة تظل كما هي لجميع العناصر بغض النظر عن عرض العناصر الأصلية. على سبيل المثال، إذا كان عرض النافذة 1000 بكسل، فإن 1vw سيكون مساويًا لـ 10 بكسل.

vh

نفس فولكس فاجن ( عرض إطار العرض)، فقط هذه الوحدةتعتمد القياسات على ارتفاع منطقة المشاهدة. 1vh يساوي 1/100 من ارتفاع المشاهدة. على سبيل المثال، إذا كان ارتفاع نافذة المتصفح هو 900 بكسل، فإن 1vh سيكون 9 بكسل.

vmin

Vmin يساوي 1/100 من الحد الأدنى للقيمةبين ارتفاع وعرض إطار العرض. وبعبارة أخرى، 1/100 من الجانب أقصر طول. على سبيل المثال، إذا كانت أبعاد النافذة 1200 في 800 بكسل، فستكون قيمة vmin 8 بكسل.

vmax

vmax يساوي 1/100 من القيمة القصوىبين ارتفاع وعرض إطار العرض. وبعبارة أخرى، 1/100 من الجانب أطول طول. على سبيل المثال، إذا كانت الأبعاد 1200 في 800 بكسل، ثم vmax هو 12 بكسل.

اهتمام ٪

تعتمد المسافة المحددة كنسبة مئوية على طول العنصر الأصلي. على سبيل المثال، إذا كان عرض العنصر الأصلي 1000 بكسل وكان فرعه يمثل 50% من تلك القيمة، فسيكون عرض العنصر الفرعي 500 بكسل.

دعم المتصفح

em CSS، ex، px، cm، mm، in، pt، and pc

مدعومة في كافة المتصفحات، بما في ذلك الإصدارات الأقدم من IE.

هناك العديد من الخصائص في CSS التي تأخذ الطول (أو المسافة) كقيم. وتشمل هذه الخصائص خصائص نموذج الكتلة: العرض، الارتفاع، الهامش، الحشو، الحدود. ولكن هناك خصائص أخرى، مثل الإزاحة وحجم الظل لخاصية box-shadow، أو حجم الخط أو تباعده. ما هي وحدات الطول المستخدمة عادة في CSS؟ هناك العديد من الخيارات.

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

بكسل بكسل

.التفاف (العرض: 400 بكسل؛)

ربما يكون من الأفضل اعتبار البكسل "كمية مجردة" نظرًا لأنه لا علاقة له بالبكسل الفعلي على شاشتك.

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

البكسل هي وحدة القياس الأساسية على الويب، وبما أنها يتم عرضها بشكل موحد تقريبًا، يتم حساب العديد من الأطوال بالبكسل؛ نفس "محادثات" جافا سكريبت بالبكسل.

بوصة في

.التفاف (العرض: 4 بوصة؛)

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

1 بوصة == 96 بكسل

سنتيمترات سم

.التفاف (العرض: 20 سم؛)

السنتيمتر هو وحدة الطول في الأنظمة المترية المختلفة، وتساوي 0.01 متر. في CSS يتم تعيينه أيضًا إلى وحدات البكسل.

1 سم == 37.8 بكسل

ملليمتر مم

.التفاف (العرض: 200 مم؛) 1 مم == 0.1 سم == 3.78 بكسل

وحدات القياس المعتمدة على الخط

م

.التفاف (العرض: 40 ملم؛)

وحدة القياس النسبية. في الطباعة، يتم استخدام وحدات قياس إضافية - واحدة منها تتوافق مع عرض الحرف الكبير M. الخاصية الرئيسية التي تؤثر على حجم الخط هي حجم الخط.

بدون أي إضافة قواعد المغلق 1em يعمل مثل هذا:

1em == 16px == 0.17in == 12pt == 1 قطعة == 4.2 مللي متر == 0.42 سنتيمتر

إذا قمت بتغيير حجم الخط في مستند، يصبح 1em مساوياً لحجم الخط الحالي (المجموعة).

هناك بعض الأشياء التي تبدو غريبة. إذا كان هناك عنصر بحجم خط 1.1em داخل عنصر بحجم خط 1.1em أيضًا، بالإضافة إلى أنهم يشتركون في أصل مشترك حجم خطه 1.1em، فإن ارتفاع الخط الناتج للعنصر المتداخل في حد ذاته سيكون 1.1 X 1.1 X 1.1 == 1.331em . أي أنه يجب أن تأخذ في الاعتبار ما يلي: عندما تقوم بتعيين حجم خط لعنصر يساوي، على سبيل المثال، 10em ، فهذا لا يعني على الإطلاق أنه أينما وضعت العنصر، فإن خطه سيكون مساويًا لـ 10em. كل هذا يتوقف على السياق (انظر الأدلة).

ريم

.التفاف (العرض: 40ريم؛)

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

دعم غير كامل للمتصفح: لا يعمل في IE 8 أو Safari 4 أو iOS 3.2.

أغراض

.التفاف (العرض: 120 نقطة؛)

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

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

رمح

.التفاف (العرض: 12 قطعة؛)

نفس القصة مع النقاط، ولكن 1pc == 12pt.

السابق

.التفاف (العرض: 60ex؛)

تعتمد وحدة القياس هذه على الارتفاع x (الأحرف الصغيرة) للخط الحالي. في بعض الأحيان يتم تضمين معلومات x-height في الخط نفسه، وفي بعض الأحيان يحسب المتصفح هذا الارتفاع عن طريق قياس ارتفاع الحرف الصغير، وفي أسوأ الحالات، يقوم المتصفح ببساطة بتعيين هذا الارتفاع على 0.5em . لفهم سبب استخدام x-height، تخيل حرفًا صاعدًا، مثل الحرف الصغير d. الارتفاع X لا يشمل هذا القائد.

على عكس em s، التي لا تتغير عند تغيير خاصية عائلة الخطوط، فإن وحدات ex ستتغير عندما تقوم بتغيير قيمة خاصية عائلة الخطوط (إثبات).

الفصل

.التفاف (العرض: 60ch؛ )

مشابه في الروح لـ x-height، ولكن بدلاً من x-height، يتم استخدام عرض حرف بقيمة 0. يتغير أيضًا عند تغيير قيمة خاصية عائلة الخطوط.

دعم المتصفح: تشغيل هذه اللحظةغير مدعوم من قبل المتصفحات المستندة إلى webkit (safari، Yandex، chrome).

تعتمد وحدات الطول المئوية على حجم إطار العرض

فولكس فاجن

.التفاف (العرض: 10 فولت؛)

هذا هو عرض منطقة عرض الجهاز. 1vw يساوي 1% من عرض منفذ العرض. تشبه إلى حد ما النسب المئوية، إلا أن العناصر المحددة بوحدات vw لم تعد تتأثر بعرض العناصر الأصلية الخاصة بها.

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

VH

.التفاف (العرض: 10vh؛)

كما هو الحال مع شركة فولكس فاجن، فإن وحدة القياس هذه فقط لا تعتمد على العرض، بل على ارتفاع منطقة عرض الجهاز.

فمين

.التفاف (العرض: 20 فولت دقيقة؛)

1vmin يأخذ 1vw أو 1vh، أيهما أصغر. عند تحديد الحجم الخط القياسييمكن أن يكون vmin أكثر فائدة من vh أو vw .

ماكس

.التفاف (العرض: 20 فولت كحد أقصى؛)

1vmin يستغرق 1vw أو 1vh، أيهما أكبر.

دعم المتصفح: المتصفحات المعتمدة على webkit تدعم vmin، لكنها لا تدعم vmax (حتى الآن). فايرفوكس يدعم vmax.

اهتمام

.التفاف (العرض: 50%؛)

تعتمد المسافة المحددة كنسبة مئوية على نفس خاصية العنصر الأصلي. على سبيل المثال، إذا كان عرض العنصر 450 بكسل وكان عرض العنصر الفرعي الخاص به 50%، فإن عرض العنصر الفرعي هو 225 بكسل.

من الناحية الفنية، لا يمكن للنسب المئوية قياس الطول، لكنني قمت بتضمين النسب المئوية في هذه المقالة لأن الطول والنسب المئوية مرتبطان ببعضهما البعض.

يحتوي CSS3 على وحدات قياس جديدة. (أعتقد أنني تحدثت بالفعل عن هذا. م) لقد سمعت بالفعل عن px وpt وem والريم الجديد. دعونا نلقي نظرة على عدد قليل من أكثر: فولكس فاجن وvh.

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

باستخدام vw/vh يمكننا ضبط حجم العناصر بالنسبة لحجم إطار العرض. تعتبر وحدات vw/vh مثيرة للاهتمام لأن 1vw هي وحدة تساوي 1/100 من عرض إطار العرض، لتعيين عنصر بعرض يساوي عرض إطار العرض، على سبيل المثال، تحتاج إلى تعيين width:100vw.

كيف يمكن استخدامه

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

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

Img (أقصى ارتفاع: 95vh؛)

في في هذه الحالةقمت بضبط الارتفاع على 95vh لترك بعض المساحة عندما يكونون على الشاشة.

دعم المتصفح

إذا كان rem مدعومًا من قبل جميع المتصفحات الرئيسية تقريبًا بما في ذلك IE9، فإن استخدام vw وvh يستحق التأجيل. في الوقت الحالي يتم دعمهم فقط متصفح الانترنت 9.

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

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

تعريف م

تقدم المواصفات المعلمة em تمامًا:

يساوي قيمة حجم الخط المحسوبة المطبقة على العنصر

بمعنى آخر، إذا كان لدينا كود CSS التالي:

عنصر (
حجم الخط: 20 بكسل؛
}
وهذا يعني أن 1em تم تعيينه في هذا العنصر أو أي عنصر منه عناصر الطفل، ستكون تساوي 20 بكسل. .

إذا كنت تستخدم الكود التالي:

عنصر (
حجم الخط: 20 بكسل؛
العرض: 4م؛
الارتفاع: 4م؛
}
هذا يعني أن عرض العنصر وارتفاعه (المحدد هنا بـ 4em x 4em) سيكون 80px x 80px (20px * 4 = 80px).

دعونا نلقي نظرة فاحصة

مفتاح التذكر هو غرض م وأصله هذه المعلمة. التالي:

Em هي وحدة طباعة للتغيير تساوي حجم الخط المحدد حاليًا. الاسم em مرتبط بالحرف M. هذه الوحدة مشتقة في الأصل من العرض الحرف الكبير M عند استخدام خط معين

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

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

ماذا لو لم أستخدم معلمة حجم الخط؟

في المثال أعلاه وفي JSBin الذي قمنا بالارتباط به، تم تحديد معلمة حجم الخط بدقة. يتم بعد ذلك اشتقاق وحدة em من المعلمة "الأساسية". ولكن ماذا لو لم يكن العنصر يحتوي على معلمة حجم الخط بالضبط؟

في هذه الحالة، بما أن معلمة حجم الخط يتم توريثها عبر شجرة المستند، فسيتم اشتقاق قيمة وحدة em من المعلمة التي تم توريثها. إذا لم يكن هناك ذكر لحجم الخط في المستند بأكمله، فستكون قيمة وحدة em الواحدة 16 بكسل، وهو الإعداد الافتراضي (ونعتقد أن هذا لا يختلف عبر المتصفحات).

يجب أن يكون "rem" تلقائيًا بالنسبة للأشخاص

لقد حان الوقت لجلب إضافة جديدة إلى CSS: . هذه الوحدة (الاسم مشتق من "root em") مدعومة بشكل مثالي في جميع المتصفحات: IE9+ وFF3.6+ وChrome وSafari 5+ وOpera 11.6+.

بشكل عام، هذه الوحدة سهلة الفهم للغاية. يمنحك القدرة على إنشاء قيم وحدة em خلال مستند HTML بناءً على قيمة "رئيسية" واحدة محددة في " لغة البرمجة"-عنصر. بهذه الطريقة يمكنك نسيان معلمة حجم الخط، حيث أن جميع وحدات em المستخدمة في المستند ستعتمد على قيمة rem الرئيسية، على سبيل المثال:

أتش تي أم أل (حجم الخط: 62.5%;)
الجسم (حجم الخط: 1.4rem;) /* =14px */
h1 (حجم الخط: 2.4rem;) /* =24px */
وكما هو الحال مع em، إذا لم تحدد قيمة حجم الخط في " لغة البرمجة"، فإن وحدة "root em" ستكون 16 بكسل افتراضيًا.

كارب ديم

يمكنك التوصل إلى مجموعة كاملة من التعبيرات الأخرى باستخدام em :)

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

على الرغم من أنه يمكننا إنشاء قالب كامل باستخدام وحدات em، يبدو لنا أنه في قوالب التكيفلا يزال من الأفضل استخدام قيم البكسل والنسب المئوية، وكما ذكرنا، استخدام ems للطباعة.

لذا، نأمل أن تستمتع ببرنامجنا التعليمي اليوم وأن تستخدم ما تعلمته.

لا تنسى التعليق!

عند العمل باستخدام CSS، تأتي دائمًا لحظة تبدأ فيها في إدراك مدى قوة هذه الأداة أو تلك. على الرغم من أنني أمتلك فهمًا جيدًا لوحدة CSS em، إلا أنني لم أشعر بقوتها إلا بعد قراءة مشاركة Simurai. في هذه المقالة سأستخدم تجربته.

ما هو م؟

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

انظر إلى كود CSS التالي:

مثال (حجم الخط: 20 بكسل؛)

في هذه الحالة، 1em من هذا العنصر أو أبنائه ( في غياب تعريفات أخرى لحجم الخط) سيكون مساوياً لـ 20 بكسل. لذلك إذا أضفنا السطر:

مثال (حجم الخط: 20 بكسل؛ نصف قطر الحدود: .5em؛)

قيمة نصف القطر الحدودي 5em تساوي 10 بكسل (أي 20 * 0.5 ). على نفس المنوال:

مثال (حجم الخط: 20 بكسل؛ نصف قطر الحدود: .5em؛ الحشو: 2em؛)

ستكون قيمة الحشو 2em 40 بكسل (20 * 2 ). كما ذكرنا سابقًا، ينطبق هذا النوع من الحساب على أي عنصر فرعي ما لم يكن له حجم خط محدد بشكل صريح. ثم سيتم حساب قيمة وحدة CSS em بطريقة مماثلة.

إذا لم يحدد CSS حجم الخط، فسيكون em هو حجم الخط الافتراضي للمتصفح. غالبًا ما تكون هذه القيمة 16 بكسل. دعونا ننظر في كيفية استخدام هذه الطريقة ل تغيير سهلحجم العنصر.

تغيير حجم مستويات المكونات

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

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

دعونا نرى هذا في العمل:

عرض العرض التوضيحي

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

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

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

لاحظ أن:

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

بعض التعليقات والسهو وما إلى ذلك..

كما ترون من المثال، فإن هذا النوع من تغيير الحجم المرن ليس هو ما يجب عليك استخدامه دائمًا. يمكن أن تكون محدودة إلى حد ما.

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

لا حاجة لاستخدام وحدات البكسل لتعيين حجم الخط الجذر. يمكنك استخدام em لهذا الغرض، لكن تذكر أن هذه الوحدات سيتم توريثها من الوالدين.

ماذا عن ريم وساس؟

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

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

خاتمة

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

ترجمة المقال "قوة وحدات em في CSS" تم إعدادها من قبل فريق المشروع الودود.