بیاید با اصول شروع کنیم
در CSS می توانید اندازه ها یا طول عناصر را با استفاده از واحدهای مختلف اندازه گیری مشخص کنید. واحدهای اندازه گیری که در برخی گزینه های افزونه Elementor پیدا خواهید کرد، که شامل PX ، EM ، REM ،٪ ، VW و VH است ، اگرچه چندین واحد اندازه گیری دیگری نیز در CSS وجود دارد. که ویرایشگر Elementor همه این واحدها را ارائه نمی دهند. Elementor فقط از واحد هایی استفاده می کند که بیشتر کاربرد را دارد.
مهمترین اصل برای یادگیری مفهوم واحدهای مختلف این است که بعضی از واحدها مانند PX، واحدهای مطلق و برخی دیگر واحدهای نسبی می باشند.
واحد های مطلق
px : پیکسل ها (px) واحد مطلق در نظر گرفته می شوند، واحد PX ثابت است و براساس هیچ عنصر دیگری تغییر نمی کند. استفاده از واحد PX می تواند برای برخی از موارد در حالت واکنشگرایی مشکل ساز باشد، اما برای حفظ اندازه ثابت برای برخی از عناصر بسیار مفید است. اگر عناصری دارید که نباید اندازه آنها را تغییر دهید، استفاده از PX انتخاب خوبی است.
واحد های نسبی
EM : مربوط به عنصر والد است
REM : مربوط به عنصر ریشه (برچسب HTML)
٪ : مربوط به عنصر والد است
VW : نسبت به عرض نمایش می باشد
VH : نسبت به ارتفاع نمایش می باشد
برخلاف PX ، واحدهای نسبی مانند ٪ ، EM و REM برای طراحی های ریسپانسیو و واکنشگرایی مناسب ترند. واحدهای نسبی در دستگاه های مختلف مقیاس بهتری دارند زیرا می توانند با توجه به اندازه نمایشگر تغییر اندازه دهند.
بیایید به یک مثال ساده نگاه کنیم.
در تمامی مرورگرها ، اندازه پیشفرض متن ها 16 پیکسل است. واحدهای نسبی اندازه را از این پایه (16 پیکسل) محاسبه می کنند. و این مبنایی برای محاسبه واحدهای نسبی می باشد
بنابراین نتیجه این واحدها هنگام برخورد با پیش فرض 16px چیست؟
1em = 16px (1 * 16)
2em = 32px (2 * 16)
.5em = 8px (.5 * 16)
1rem = 16px
2rem = 32px
.5rem = 8px
100% = 16px
200% = 32px
50% = 8px
اما اگر شما اندازه پیش فرض را تغییر دهید چه؟ از آنجا که اینها واحدهای نسبی هستند ، مقادیر اندازه نهایی بر اساس اندازه پایه جدید ساخته می شوند. اگرچه پیش فرض 16 پیکسل است ، اما اگر شما آن را به 14 پیکسل تغییر دهید.، در نتیجه اندازه های محاسبه شده برابر می شود با :
1em = 14px (1 * 14)
2em = 28px (2 * 14)
.5em = 7px (.5 * 14)
1rem = 14px
2rem = 28px
.5rem = 7px
100% = 14px
200% = 28px
50% = 7px
تفاوت EM و REM چیست ؟
با توجه به مقایسه ای که در بالا انجام شد، این دو واحد کاملا یکسان بنظر می رسند. لازم است بتدانید که پیشفرض عنصر ریشه با عنصر پدر برابر 16 پیکسل می باشد. بنابراین چه تفاوتی با هم دارند؟
همانطور که گفته شد، نحوه اندازه گیری REM بر اساس عنصر ریشه HTML است. از طرفی دیگر، EM بر اساس اندازه عنصر پدر است. اگر یک عنصر پدر از یک عنصر ریشه اندازه متفاوتی داشته باشد، محاسبه EM بر اساس عنصر اصلی پدر انجام می شود و نه عنصر ریشه
در این مثال html عنصر ریشه و p عنصر پدر می باشد
html {
font-size: 17px
}
p {
font-size: 15px
}
در نتیجه
1rem = 17px
1em = 15px
کار کرد واحد های %، VW و VH چیست؟
واحد های EM، PX و REM برای تعیین اندازه متون استفاده می شوند اما %، VW و VH بیشتر برای تعیین فاصله، عرض و ارتفاع مورد استفاده قرار می گیرند.
VH مخفف viewport height است که همان ارتفاع قابل مشاهده در صفحه می باشد. 100VH برابر است با 100% از ارتفاع کل نمایشگر، و البته VW مخفف viewport width است که عرض قابل مشاهده در صفحه می باشد.
اطلاعات بیشتر در مورد واحد های VW و VH
واحدهای Viewport نمایانگر درصدی از نمای فعلی مرورگر (اندازه مرورگر فعلی) است. در حالی که بنظر می آید که واحد ٪ مشابه این واحد است، اما اختلاف وجود دارد. این واحد ها، مشابه واحد درصد عمل می‌کنن، با این تفاوت که اندازه آنها، به اندازه عنصر پدر بستگی نداره، بلکه مستقیما به طول و عرض viewport ما بستگی دارد.
انواع واحد های اندازه گیری در ویرایشگر المنتور
عرض ستون : اگر یک ستون را انتخاب کنید مشاهده می کنید که در تب طرح بندی فقط یک واحد اندازه عرض وجود دارد – و آن هم بصورت ٪ است. عرض ستون ها فقط هنگام استفاده از درصد به خوبی کار می کنند ، بنابراین گزینه وجود ندارد.
margins (فاصله): بهتر از فاصله گذاری با استفاده از مارجین را با واحد های PX و % مشخص کنید، استفاده از % معمولا برای اطمینان از بزرگتر نشدن حاشیه هنگام کوچک کردن یک دستگاه تلفن همراه، ترجیح داده می شود.
Padding : شما می توانید مقدار فاصله درونی عناصر خود را با واحد های EM، PX یا % مشخص کنید. معمولا استفاده از EM یا % ترجیج داده می شود.
اندازه متن (تایپوگرافی): در بخش تایپوگرافی شما می توانید اندازه متون خود را به چهار گزینه REM, EM, PX و VH تعیین کنید.
آیا تا به حال شده که عنوانی را ایجاد کرده باشید که در حالت دسکتاپ اندازه خوبی داشته باشد اما در حالت موبایل اندازه و ظاهر مناسبی نداشته باشد ؟ بله شک نداریم که حداکثر برای تمامی شما بارها این اتفاق افتاده است:)
نکته کلیدی در حل این مشکل استفاده نکردن از EM ، REM یا VH به جای PX است. اینکه کدام را انتخاب کنید به شرایط شما بستگی دارد. ما معمولاً EM را پیشنهاد می کنیم.
توجه داشته باشید که برای تعیین اندازه برای دسکتاپ ، تبلت و موبایل می توانید از مقدار PX نیز برای اندازه متن های خود استفاده کنید. اما برای اینکه در نمایشگر های مختلف اندازه درستی داشته باشید شما نیاز دارید که اندازه متن های خود را در تمامی نمایشگر ها به صورت جداگانه تعیین نمایید. این روش مرسوم ترین واحد در تعیین اندازه متن های سایت می باشد.
