Rems و ems و pixels. ماهو الفرق؟
نشرت: 2015-12-30إذا فتحت أي ورقة أنماط لموقع الويب ، فستصادف rems أو ems أو pixels أو أي مزيج منها. في تصميم CSS ، هذه هي الوحدات الرئيسية للقياسات المستخدمة. سواء كنت تصمم موقعًا من البداية ، أو إذا "ورثت" موقعًا مصممًا مسبقًا وتحتاج إلى صيانته ، فهذه العناصر مهمة للطباعة والتباعد والحجم الآخر في التصميم المرئي.
ما الذي يجعل وحدة قياس أفضل من الأخرى؟ لا توجد إجابة محددة ، واعتمادًا على الموقف ، قد يتم تفضيل إحداهما على الأخرى. إن معرفة حالة الاستخدام وما الذي سيعمل بشكل أفضل سيساعد في تحديد أفضل قياس لتصميمك.
بكسل
منذ الأيام الأولى للويب ، كانت البكسل خيارًا موجودًا في أوراق الأنماط في كل مكان. إنها موثوقة ودقيقة ولا يمكن مطابقة اتساقها. يتم دعم البكسل في جميع المتصفحات ، مما يسهل العمل معها.
على الرغم من أن وحدات البكسل رائعة ، إلا أنها تحتوي على بعض القيود. نظرًا لأنها قياس محدد ، لا يمكن للمستخدمين تغيير حجم نص المستعرض الافتراضي في إعدادات المتصفح. لا تتوسع الأشياء كما تفعل مع ems و rems ، مما يجعل تغيير الحجم صعبًا من وجهة نظر إمكانية الوصول بالنسبة للمستخدم. يمكن للمرء أن يجادل بأن المستخدم يمكنه فقط التكبير ، بدلاً من الدخول في إعدادات المتصفح. لا توجد إجابة واحدة صحيحة أو خاطئة ، إنه مجرد شيء يجب مراعاته.
ما هم؟
وحدات البكسل هي وحدة قياس تعتمد على ضبط الحجم. إنها وحدة لقياس الأبعاد على الشاشة وتستخدم عند الحاجة إلى تصميم دقيق. نقول أشياء مثل "دقة البكسل" ، لذلك تعودنا على هذا القياس.
قد يبدو المثال شيئًا كالتالي:
.main-header p {
font-size: 14px;
}
تستخدم وحدات البكسل في تصميم الويب ، ولكن في عصر تصميم الويب الحيادي للأجهزة ، لا تكون قياسات الشاشة هي التركيز الرئيسي. يتعلق الأمر بكيفية جعل المحتوى الخاص بنا مناسبًا بشكل أفضل لعدد لا يحصى من الأجهزة ، لذلك هناك ems و rems يمكن أن تساعد في ذلك.
إمس
وحدة القياس هذه لها تاريخ طويل. يعود إلى عام 1996 وكان موجودًا منذ الأيام الأولى لـ CSS. تم اعتبار البكسل من أفضل الممارسات ، لذلك لم تكن ems شائعة في تلك الأيام الأولى. لقد اكتسبوا شعبية منذ ذلك الحين لأن الغرض منهم هو العمل كوحدة مرتبطة بحجم الخط في محتوى معين ويساعدون في الاتساق.
ما هم؟
إذا كنت مهتمًا بالطباعة الكلاسيكية ، فمن المحتمل أنك تعرفت على "em" ، لأنها وحدة قياس تنشأ من عالم الكتابة المطبوعة. باستخدام هذا كوحدة في الطباعة ، فإن هذا القياس يساوي حجم النقطة المحدد حاليًا. على سبيل المثال ، واحد em في محرف 16 نقطة هو 16 نقطة. هذه الوحدة هي نفسها لجميع المحارف بحجم نقطة معين.
نحن لا نتحدث عن الطباعة هنا ، فكيف تظهر ems في تصميم الويب؟ يعد الحجم النسبي نقطة بيع كبيرة لـ ems لأنه يساعد في التحكم في حجم العناصر من حيث صلتها بالآخرين. يمكن أن تعمل Ems كعناصر بناء رائعة لعناصر موقع الويب نظرًا لحقيقة أن قيم em مركبة. من المهم أن نفهم حقًا كيف يعمل هذا المركب.
فهم نظم الإدارة البيئية
في معظم الحالات ، ما لم يتم تعيين الإعداد الافتراضي للمتصفح على شيء آخر ، يكون em 16 بكسل. عندما ترى 1.5 em ، فإن ذلك سيجعلها 24 بكسل. لكن الأمر ليس بهذه البساطة دائمًا. ماذا يحدث عندما يتعلق الأمر التعشيش؟ يمكن أن يكون مريحًا ومربكًا. إن معرفة كيفية عمل الأشياء عند العمل مع ems سيساعد بالتأكيد في حل أي لغز. ما حجم الفقرة "أنا متداخل" أدناه؟
<div class="one"> <div class="two"> <div class="three"> <p>I’m nested</p> </div> </div> </div>
.one, .two {
font-size: 0.5em;
}
.three {
font-size: 2em;
}
توجد ثلاثة أقسام هنا ، والفقرة متداخلة إلى حد ما. مع تسلسل DOM ، قد تضطر إلى القيام ببعض الأعمال البوليسية. لنفترض أننا نعمل باستخدام em 16 بكسل ، لأن هذا هو الأكثر شيوعًا.
فئة .one تضرب 1em في 0.5 ، أي 0.5 إم أو 8 بيكسل. مع فئة .two ، يتم ضرب هذا مرة أخرى في 0.5 ، وهو 0.25 إم أو 4 بكسل. الأمور تصبح صغيرة جدًا ، لذا فإن فصل. .three سيساعد. سنأخذ 0.25 em ونضرب هذا في 2. النتيجة 0.5 em أو 8px.
أحد الأشياء التي قد تساعد في تحديد حجم لعنصر HTML. شيء من هذا القبيل سيحدد حجم em ، بدلاً من الاعتماد على em الذي حدده المتصفح. لنقم بتعيين 1 em إلى 20px. إذا تم استخدام هذا مع المثال أعلاه ، فسيتم تطبيق نفس مبادئ التداخل. ضع في اعتبارك رغم ذلك ، لقد حددنا حجم البكسل ، لذلك سيؤثر ذلك على القدرة على قياس النص باستخدام خيار إعداد المتصفح.
html {
font-size: 20px;
}
بالإضافة إلى وحدات البكسل ، يمكن أيضًا تعيين حجم الخط بالنسبة المئوية. النقطة المهمة هي أن ems يمكن أن تعمل جنبًا إلى جنب مع وحدات القياس الأخرى. ستواجه هذا بالتأكيد ، لأنه من الشائع جدًا ضبط خط الجسم على نسبة مئوية للمساعدة في تعيين خط الأساس. لنفترض أن حجم الخط يبدأ بنسبة 62.5٪ من حجم em. بحجم 16 بكسل ، سيكون حجم الخط 10 بكسل.
body {
font-size:62.5%;
}
بمجرد أن تفهم ، يمكن أن تكون ems رصيدًا جيدًا لمشروعك. يمكن أن يكون تحجيم نص العناصر الفرعية لعناصرها الأصلية مفيدًا بالتأكيد. أيضًا ، تجعل ems من السهل تحديد مساحة أكبر في حاوية النص مما يمكن العثور عليه في تباعد الكلمات ، مما يجعلها تتبع القاعدة المرئية للقرب. سيتم تجميع العناصر ذات الصلة بشكل مرئي ، مع قدر أقل من الفوضى ، وتوفير تخطيط منظم.
ميزة أخرى رائعة من ems هي مزايا الوصول. نظرًا لأنه متعلق بجذر DOM ، فإن ems تجعله مثاليًا لتغيير حجم التصميم بالكامل بناءً على تفضيلات المستخدم. في تفضيلات المتصفح ، يمكنك بسهولة تغيير حجم الخط الافتراضي ، والذي يقوم بعد ذلك بتغيير الحسابات ، في ems ، إلى موقع الويب بالكامل.
ريم
ما هم؟
Rems هي إضافة حديثة إلى حد ما إلى الجدول الزمني لـ CSS. تم تقديم وحدة القياس هذه باستخدام CSS3 وتحل بعض المشكلات المتعلقة بالبكسل و ems. باسم مشابه لـ "ems" ، قد تتساءل عن معنى حرف "r". يأتي من مصطلح "Root EM".
الجذر هو عنصر HTML. الحجم المحدد في عنصر HTML هو أساس هذا القياس. سترى أننا استخدمنا تغيير الحجم على عنصر HTML ؛ من المقبول الجمع بين نوعي القياس.
html {
font-size: 1em;
}
.one {
font-size: 1.2rem; /* 1.2 x the value set in html */
}
المتصفحات الحديثة تدعم rems ، ولكن تأكد من مراجعة BrowserStack عن المتصفحات القديمة التي تحتاج إلى دعمها قبل الالتزام بـ rems. لا تدع المتصفحات القديمة تعيقك على الرغم من ذلك ؛ يمكنك دائمًا تحديد بكسل احتياطي لأي شيء أقل من IE9. تتجاهل المتصفحات الحديثة وحدات البكسل لأنها تفضل rems. يمكن أن يبدو مثل هذا:
.my-text {
font-size: 24px;
font-size: 1.5rem;
}
فهم ريمس
هل تتذكر الرياضيات التي كان علينا القيام بها للعناصر المتداخلة لنظام ems؟ هذا ليس ضروريا مع ريم. كل ذلك يعتمد على عنصر الجذر هذا. لا داعي للقلق بشأن العناصر الأم ، فهي تعتمد دائمًا على الجذر.
<div class="one"> <div class="two"> <div class="three"> <p>I’m nested</p> </div> </div> </div>
html {
font-size: 1em;
}
.one, .two {
font-size: 0.52em;
}
.three {
font-size: 2rem;
}
توجد ثلاثة أقسام هنا ، والفقرة متداخلة إلى حد ما كما رأينا في مثال em. مرة أخرى ، لنفترض أننا نعمل بحجم em يبلغ 16 بكسل.
تم تعيين أحجام .two .one و. كل ما يهم حقًا هو تصميم .three ، وهو 2 ems. ستستند الفقرة إلى عنصر HTML الخاص بـ 1em. سيتم مضاعفة هذا القياس ، مما يمنحنا 2 rems أو 32 بكسل.
هل تريد توسيع نطاق كل شيء بالتساوي؟ فقط اضبط حجم عنصر الجذر. هذا مفيد أيضًا عند ضبط الحجم الافتراضي للمتصفح. يمكنك أن ترى كيف يسمح ems لذلك ، rems تفعل ذلك أيضًا.
هناك الكثير مما يدعو للقلق بشأن سلوك التعشيش غير المتوقع مع rems. من السهل أن تفهم أين يأتي دور عنصر الجذر وكيف يؤثر ذلك على تصفيفك عند استخدام rems.
عند مقارنة القياسات المختلفة ، يمكنك أن ترى أن لها إيجابيات وسلبيات. سيساعدك الفهم الحقيقي لكيفية عمل وحدات القياس وكيفية عملها مع إعدادات المستعرض على اختيار أفضل ما يناسب الموقف أو المشروع.