بعد از مراحل parse شدن HTML، نوبت به CSS میرسه. بعد از Load شدن CSS ها نوبت به parse اونا میرسه. مراحل parse به ترتیب resolve confilicting CSS declarations و Process final CSS values هستن که بعد از اونا نوبت به CSSOM میرسه و در نهایت Render Tree که شامل HTML ها و CSS ها هست و بعدشم بوممم ? وبسایت render میشه. وقتی ما داریم داخل فایل استایل هامون استایل مینویسیم متوجه این نیستیم که واحد هایی که استفاده میکنیم مثل px,rem,em,vh,vw از چه نوع واحدی هستن.
واحد های relative مثل rem,em وقتی از مراحل parse فایل CSS ما رد میشن تبدیل به واحد های absolute میشن. واحد هایی مثل cm,pt,pc اصلا پیشنهاد نمیشن?
مثلا اگه ما گفتیم کل tag های p ما اندازه فونتشون 1rem باشه، بعد از parse شدن تبدیل به ۱۶px میشه.
دلایل زیادی میتونیم براش بیاریم که شاید من همشون رو ندونم ولی یکی از اونا اینه که میتونیم خیلی راحت با چند خط style ساده سایز هامون رو داخل device های مختلف کنترل کنیم.مثلا برای font-size یه تکنیک خیلی خوبی هست که اگر میخواستیم بدون اون تکنیک font-size هامون رو کنترل کنیم شاید یه mediaquery با ۲۰۰ خط style نیاز داشتیم.
قبل از همه باید بگم باید همه ی font-size هاتون Rem باشن چون میخوایم از Root برای استفاده این کار کمک بگیریم. بعد از اون خیلی ساده داخل یه mediaquery میگیم که Root پروژه font-size مثلا باشه ۱۰px. اگه یادتون باشه میگفتیم default مرورگر ۱۶px هست و کاربر میتونه اونو تغییر بده. حالا ما خودمون میگیم اگر داخل نمای موبایل صفحه ما نمایش داده شد default بشه ۱۰px. به همین سادگیی.
برای تغییر Root هم میتونین font-size رو تغییر بدین.
html { font-size: 16px; /* default value */ } @media (max-width: 920px) { body { font-size: 10px } }
ممنون که مطلب رو خوندین و امیدوارم مفید بوده باشه ?
