ویرگول
ورودثبت نام
محمد امین ش
محمد امین ش
محمد امین ش
محمد امین ش
خواندن ۲ دقیقه·۷ سال پیش

تفاوت بین Ems و Rems در Css چیست ؟

In CSS, what's the difference between ems and rems?

یکی از روش هایی که واقعا باعث بهبود پیاده سازی در طراحی وب می شود استفاده از واحدهای نسبی مثل em و rem می باشد.

برای ساختن کامپوننت های مستقل که دوباره قابل استفاده و یا اینکه به راحتی قابل ویرایش باشند, و اینکه بتوانیم با تغییرات کمی به طرح جدیدی از کامپوننت دست پیدا کنیم, به عنوان فقط یکی از نیازها باید از واحدهای نسبی (relative units) مناسب استفاده کنیم.

سوال اینجا است که از کدام یک باید استفاده کرد؟ این سوال چندین سال است که مورد بحث قرار می گیرد و طرفداران هریک از این واحدها به دنبال این هستند که یکی را بر دیگری غالب بدانند.

در این مطلب و مطالب بعدی با هر دو واحد em و rem کاملا آشنا می شویم و همینطور نقاط مثبت و منفی هر کدام را بررسی کرده, و یاد می گیریم چگونه از این واحدها برای ساخت کامپوننت های ماژولار استفاده کنیم.

واحد em: واحد em به اندازه ابعاد حرف M انگلیسی در فونت جاریه. یعنی اگر مثلا اندازه فونت رو ۱۶ پیکسل در نظر بگیریم، یک em برابر با 16x16 پیکسله که معنیش اینه اگر حرف M انگلیسی تو توی یه مربع بندازیم، اون مربع ۱۶ در ۱۶ پیکسله. جالبی واحد em اینه که اندازه این مربع رو بر اساس اندازه فونت المان والد (parent element) در نظر میگیره. مثلا اگر شما یک div داشته باشید که اندازه فونتش 20px باشه و داخل اون div یک p بذارید و سایزش رو بنویسید 2em، اندازه فونت اون p میشه ۴۰ پیکسل ولی شما اون ۴۰ پیکسل رو دستی ننوشتید. برای همین اگر بخواید اندازه فونت تمام المان‌های داخل اون div رو با هم یک جا ببرید بالا، اون ۲۰ پیکسل رو فقط عوض می‌کنید.

  • واحد rem: عین واحد em است با این تفاوت که اندازه‌اش رو بر مبنای اندازه فونت ریشه‌ای‌ترین المان صفحه که بهش سایز دادین حساب می‌کنه. مثلا اگر body فونت‌سایز ۱۶ داره، هرجا توی صفحه از rem استفاده کنید بر اساس اون ۱۶ حساب میکنه.
https://www.aparat.com/embed/IjdnE
http://www.aparat.com/v/IjdnE
امتحانشمسی پورتوسعه وبمصاحبه شغلیارائه‌ وب
۱
۰
محمد امین ش
محمد امین ش
شاید از این پست‌ها خوشتان بیاید