29
تشکر

آشنایی با واحد اندازه گیری rem

CSS3 - سی اس اس 3

CSS3 – سی اس اس 3

احتمالا بیشتر شما با واحدهای اندازه گیری مختلفی در CSS آشنا هستید که البته معروف ترین آنها px است و همچنین واحدی که در چند سال گذشته حرف آن زیاد به گوش رسیده واحد em است. در این مطلب ما قبلا با واحد اندازه گیری em آشنا شدیم. این واحد به صورت relative کار میکند و بر اساس مقدار اندازه والد عمل میکند که همین نکته باعث میشود مشکلاتی در استفاده از این واحد در font-size بوجود آید.

در ادامه مطلب همراه ما باشید…

برای مثال در کد زیر به عنصر والد 10px اندازه font-size را داده ایم. حالا به فرزند آن مقدار 2em را قرار میدهیم که چون والد آن 10px است دو برابر آن میشود 20px که بر روی عنصر فرزند اعمال میشود.

.parent {
  font-size: 10px; 
}
.parent p.child {
  font-size: 2em; /* outputs to 20px */ 
}

حالا شما اگر عناصر تو در توی زیادی داشته باشید و با واحد em هم کار کنید به مشکلاتی مانند زیر برخورد میکنید. در مثال زیر میبینید که به دلیل اینکه در واحد em هر عنصر بر اساس عنصر والدش اندازه گیری میشود مشکلاتی بوجود آمده است.

به همین دلیل برای حل این مشکل CSS یک واحد دیگر با نام rem یا root em را معرفی کرده است. در این واحد مقادیر عناصر فرزند بر اساس عنصر html محاسبه میشوند نه بر اساس عنصر والد که این کار، این واحد را برای استفاده در font-size مناسب میکند.

html {
  font-size: 16px; 
}
.parent {
  font-size: 10px; 
}
.parent p.child {
  font-size: 2rem; /* relative to html - outputs to 32px */ 
}

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

واحد اندازه گیری rem در اکثر مرورگرها به غیر از IE8 و Opera mini پشتیبانی میشود.

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

  • The perspective CSS property determines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.
    اینم ترجمه خودم:
    نمای پرسپکتیو فاصله بین z=0 (همون حالتی که وقتی z-index:0px قرار میدیم) رو تا کاربر مشخص میکنه که به المان ها خاصیت پرسپکتیو در مکانیابی سه بعدی میده.
    هر المان سه بعدی که مولفه ی z اون بیشتر از صفر باشه یا کمتر از صفر باشه کوچکتر نمایش داده میشه.
    ثاتیر این کوچکتر یا بزرگتر نمایش داده شدن المان ها به مقداری که به خاصیت پرسپکتیو میدیم بستگی داره.

  • جدیدا نظر که میدم به یه صفحه ای میره که میگه can not access to … بررسی کنید فکر کنم از سرور هست

  • خوب بود ولی یه مطلبم راجب perspective بزارید مثلا perspective:30px با perspective:200px چه فرقی داره؟ اصلا مقدارش بر چه مبنایی هست؟ هرجا گشتم نبود!
    یه مطلبم راجب کار با session ها در php بزارید که خیلی پر کاربرد هست.
    بازم ممنون وبسایت شما خیلی به روز هست ولی خیلی دیر به دیر مطلب میزارید یکم سرعت بدید به کار .

  • javad می‌گه:

    agha damet dagh

  • فرشاد می‌گه:

    خداییش من هر دفعه سر به سایتت میزنم کف و خون قاطی میکنم !
    آرزو به دلم موند یه سوال برام پیش بیاد شما جواب نداده باشی !

    مطمئن باش هر روز صبح که میام محل کار اولین وبسایتی که چک میکنم اول سایت شماست بعد گوگل !

    خــــــــــــــــــــــــــیلی تــــــــــــــــــــــــــــــشکر

  • علی می‌گه:

    ممنون. کاربردی بود!


  • نظرات این مطلب بسته است.