واحدهای اندازه گیری حالت واکنش گرا سایت

برای ریسپانسیو کردن یک صفحه راه های گوناگونی مقابل شما است. می توانید از فریم ورک های مختلف استفاده کنید و یا از media query بهره ببرید. همچنین می توانید به کمک جاوااسکریپت به هندل کردن المان های صفحه خود بپردازید. در پست های گذشته درباره مدیا کوئری ها صحبت کردیم. در این آموزش قصد داریم به بررسی واحدهای اندازه گیری حالت واکنش گرا در طراحی صفحات ریسپانسیو بپردازیم. هدف ما این است که در نهایت شما بتوانید به راحتی به ریسپانسیو کردن(responsive) سایت خود بپردازید. همچنین این کار را به صورت اصولی انجام بدهید.

واحدهای اندازه گیری em & rem

احتمالا تاکنون در پروژه های خود از واحدهای اندازه گیری مختلفی استفاده کرده اید. سانتی متر(cm)، میلی متر(mm)، پیکسل (px)، point(pt)و …. از انواع مختلف واحدهای اندازه گیری می باشد. در این مطلب قصد داریم به واحدهای اندازه گیری دیگری که استفاده می شوند بپردازیم.

em و rem به واحدهای نسبی معروف هستند. em نسبت به font-size هر عنصری تعیین می شود. فرضا اگر یک div دارای font-size:20px باشد، هر em نیز برابر 20px خواهد بود. به تکه کد زیر توجه کنید:

h3 { font-size: 20px }   /* 1em = 20px */
div { font-size: 16px }      /* 1em = 16px */

در عبارت بالا مقدار فونت سایز تگ هدر برابر 20 پیکسل می باشد. بنابراین می توان باقی واحدهای اندازه گیری برحسب em و تحت نسبتی از 20پیکسل تنظیم نمود. این کار برای طراحی صفحات ریسپانسیو به شما کمک خواهد کرد تا پیاده سازی بهینه تری داشته باشید. فرض کنید یک بخشی را پیاده سازی کرده اید. تمام اندازه های خود را در حالت نمایشگرهای بزرگ نوشته اید. برای تغییر ابعاد المان ها در نمایشگرهای کوچکتر نیاز است که فرضا اندازه margin یا padding ویا دیگر ابعاد بخش طراحی شده را تغییر دهید. اگر ابعاد margin یا padding و… را به صورت em نوشته باشید فقط نیاز است تا فونت سایز مربوط به آن بخش را تغییر دهید. باقی المان ها نسبت به همان em که مشخص کرده اید ابعاد خود را تغییر می دهند. در نتیجه ظاهر سایت شما و ابعاد المان های سایتتان responsive خواهد ماند.

h3 { 
  font-size: 20px;                   /* 1em = 20px */
  padding-right: 2em;           /* 2em = 2*20 = 40px */
  margin-top: 1.5em;            /*1.5em=1.5*20=30px */
  line-height: 0.5em;             /*0.5em=0.5*20=10px */
}

البته در برخی موارد نیاز است که نسبت ها را تغییر داد تا شاهد المان هایی خوانا باشیم. همچنین اگر چندین div تودرتو داشته باشیم، em مقدار خود را از تگ های والد دریافت می کند. فرض کنید شما div را پیاده سازی کرده اید و برای آن فونت سایزی قرار نداده اید. در اینصورت em مقدار خود را از المان یا div والد خود دریافت می کند. اگر هیچ عنصر قبلی یافت نشد، em مقدار خود را از تگ html دریافت می کند.

واحد اندازه گیری حالت واکنش گرا rem

rem دیگر مانند em نیاز به پیدا کردن تگ والد خود ندارد. Root em یا همان rem مقدار خود را از تگ html دریافت می کند. اگر اندازه فونت سایز تگ html را تغییر ندهیم، 1rem=16px می باشد. در تمام قسمت های پروژه نیز این نسبت ثابت خواهد بود. اگر در قسمت استایل ها مقدار فونت سایز تگ html را تغییر دهیم، مقدار 1rem نیز تغییر خواهد نمود. در حالت پیش فرض مقدار فونت سایز تگ html برابر 16px می باشد. با تغییر این مقدار، rem نیز تغییر می کند.

کلام آخر

شاید تا پیش از این فکر میکرده اید که برای محاسبه em و rem باید محاسبات پیچیده ای انجام می دادید. اما با مطالعه این مطلب شناختید که برای یافتن مقدار em نیاز است به مقدار فونت سایز المان والد آن بخش نگاه کنید. برای rem هم کافیست به عنصر اصلی صفحه خود یعنی html نگاه کنید. امیدواریم این مطلب (واحدهای اندازه گیری حالت واکنش گرا) برایتان مفید بوده باشد. در صورت وجود هرگونه ابهام و یا پرسشی می توانید از قسمت نظرات همین مطلب آنرا با ما درمیان بگذارید. پاسخگوی شما درباره تمام مشکلات مربوط به Responsive نمودن سایتتان خواهیم بود.