معرفی واحد اندازه گیری rem در css3

با سلام خدمت بازدیدکنندگان محترم سایت اسکریپت دات کام . چندی پیش مطلبی در مورد انواع واحداندازه گیری در css منتشر کردم که میتوانید با مراجعه به این لینک مشاهده فرمایید .

امروز و در این پست قصد معرفی یک واحد اندازه گیری جدید دیگر در css3 را دارم . واحدی به نام rem که بسیار شبیه به em که در لینک بالا توضیح داده شده می باشد.

اگر میخواهید با این واحد اندازه گیری اشنا شوید , به ادامه مطلب مراجعه کنید …

em چیست :

در واحد اندازه گیری em , فرزند مربوطه به نسبت پدر خاصیت را میپذیرفت و مثلا اگر به فرزندی مقدار 2em را میدادیم و پدر مستقیم آن 15px بود , فرزند مقدار 30px را میگرفت .

به مثال زیر توجه فرمایید :

* css *
div.vms{
    font-size:13px;
}
p.vms2{
    font-size:2em;
}


* Html *
<div class="vms">
    <p class="vms2">Vahid Majidi</p>
</div>

در مثال بالا , اندازه فونت تگ p , دو برابر پدر خود که div با کلاس vms هست میشود . ( یعنی 26px )

rem چیست :

در این واحد اندازه گیری که مخفف کلمه root em میباشد , تمامی فرزندان در کل فایل html ما , پدر خود را تگ html فرض کرده و به نسبت آن تغییر میکنند .

یعنی دیگر مهم نیست که تگ پدر یک فرزند چه مقداری را دارا می باشد و تمامی مقادیر از مقدار پیش فرض تگ html گرفته میشود .

نکته : تگ html تگیست که در برگیرنده تمام کدنویسی های وب سایت میباشد و همچنین پدر تمامی تگ ها . برای آشنایی بیشتر اینجا رو کلیک کنید 

به مثال زیر توجه فرمایید :

* css *
html{
    font-size:15px;
}
div.vms{
    font-size:13px;
}
p.vms2{
    font-size:2rem;
}


* Html *
<div class="vms">
    <p class="vms2">Vahid Majidi</p>
</div>

در مثال بالا , اندازه فونت تگ p , دو برابر تگ html میشود . ( یعنی 30px )

آموزش : وحید مجیدی

پخش اختصاصی