۷ واحد اندازه گیری در CSS که همه باید بدونن!

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

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

Rem :

شما با واحد اندازه گیری em باید آشنایی داشته باشید. واحد em به اندازه یا سایز فونت کنونی (font-size) والد خود اشاره میکنه. برای مثال به کد زیر دقت کنید:

 

تصوری حاصل از اجرای کد بالا در مرورگر به صورت زیر خواهد بود:

 css_em_unit

واحد اندازه گیری em برای مواردی سودمند خواهد بود که شما میخواهید اندازه ی خواص یک اِلمان رو بر اساس والد مشخص کنید , نوع دیگری از این واحد rem است که کلمه ی r ابتدای اون به root (ریشه) اشاره داره. به طور معمول ریشه ی همه ی صفحات وب تگ html است.

واحد اندازه گیری rem برای مواردی خوبه که شما میخواهید یک معیار کلی داشته باشید و با استفاده از اون معیار به قسمت های دیگه اندازه بدید. به مثال زیر توجه کنید:

 

 

واحد های rem و em فقط مخصوص به فونت ها نمیشن و میتونید توی هرجایی که واحد اندازه گیری لازم داره ازشون استفاده کنید و یک مقدار رو بر حسب مقدار داده شده به ریشه یا والد اون مشخص کنید , این واحدها برای ایجاد سایت هایی بر اساس سیستم گرید grid (صفحات رسپانسیو) کاربرد های زیادی داره.

vw و vh :

شاید متوجه شده باشید که در هنگام ایجاد صفحات رسپاسیو بیشتر از واحد درصد (%) استفاده میکنیم , اما CSS روش های پیشرفته ی دیگری پیش روی ما قرار داده. واحد درصد (%) اندازه ها را بر حسب نزدیک ترین والد مشخص میکند. اما بعضی مواقع شاید ما بخواهیم سایز یک قسمت رو بر حسب سایز پنجره ی مرورگر (قسمت قابل رویت مرورگر) مشخص کنیم. به نظر شما در این حالت از چه روشی (غیر از جاوا اسکریپت) میتونیم استفاده کنیم؟

بعله جواب ما واحد های vh و vw است که در اینجا به توضیح این دو واحد می پردازیم.

واحد vh برابر با یک صدم (۰/۰۱) ارتفاع مرورگر است برای مثال اگه ارتفاع مرورگر ما ۹۰۰px باشه اندازه ی ۱vh حدود ۹px خواهد بود , به طور مشابه اندازه ی vw نیز برابر با یک صدم (۰/۰۱) عرض مرورگر است مثلا اگه عرض مرورگر ۷۵۰px باشه اندازه ی ۱vm چیزی حدود ۷٫۵px خواهد بود.

با این آموزش از این به بعد میتونید اندازه ی قسمت های مختلف سایت خودتون رو بر حسب اندازه ی مرورگر بسازید 😀

در خصوص واحد های اندازه گیری vw و vh به مثال زیر دقت کنید:

 

vmin و vmax :

در حالی که واحد های vw و vh به عرض و طول مرورگر وابسته هستن , واحد های vmin و vmax کوچکترین و بزرگترین اندازه از بین طول و عرض مرورگر رو مشخص میکنن.

برای مثال اگه اندازه ی عرض مرورگر برابر ۷۰۰px و ارتفاع برابر با ۱۱۰۰px باشه اندازه ی واحد vmin برابر با ۷px و اندازه ی vmax برابر با ۱۱px خواهد بود. حالا اگه اندازه مرورگر رو تغییر بدیم و عرض مرورگر برابر با ۸۰۰px و ارتفاع برابر ۴۰۰px بشه اندازه ی واحد vmin برابر با ۴px و اندازه ی vmax برابر ۸px خواهد بود.

خب حالا این واحد ها کجا بدرد میخورن؟؟ درسته توی صفحه های تبلت و موبایل که میشه صفحه رو چرخوند (مثلا هنگامی که توی موبایل یا تبلت دارید فیلم نگاه میکنید یهویی گوشی رو به صورت افقی توی دستتون میگیرید که تصویر بزرگتر نمایش داده بشه) به تصاویر زیر توجه کنید:

در موبایل یا تبلت شما واحد vmin به صورت زیر خواهد بود:

vmin

دقت کنید که توی گوشی های همراه در بیشتر موارد سایت مرورگر رو نمیشه تغییر داد و مرورگر به صورت تمام صفحه هست و در این حالت واحد vmin عرض صفحه رو در نظر خواهد گرفت. همچنین واحد vmax نیز ارتفاع صفحه رو هدف قرار میده برای درک بهتر به عکس زیر توجه کنید:

vmax

ex و ch :

واحد های ex و ch شبیه واحد های em و rem هستن با این تفاوت که برخلاف واحد های rem و em , واحد های ch و ex فقط به font-family وابستگی دارند.

واحد ch برابر با اندازه ی عرض کاراکتر صفر (۰) در نظر گرفته میشود , با این واحد کارای جالبی میشه انجام داد مثلا اگه شما عرض یک پاراگراف رو برابر با ۴۰ch در نظر بگیرید توی هر خط این پاراگراف دقیقا حداکثر ۴۰ کاراکتر قرار خواهد گرفت و در صورتی که تعداد کاراکتر ها بیشتر از ۴۰ باشن به خط بعدی منتقل میشن.

واحد ex برابر با نصف ارتفاع کاراکتر x کوچک است (همونطور که میدونید کاراکتر های انگلیسی کوچیک و بزرگ داره) این کاراکتر همچنین برابر فاصله ی بین دو خط در دفتر های انگلیسی است! به شکل زیر نگاه کنید منطقه ای که هایلایت شده فضای بین دوخط است که ما توی دفتر حروف انگلیسی رو بین این دو خط مینوشتیم.

x2

واحد ex کاربرد های خوبی داره مثلا فرض کنید که می خواهیم یک کاراکتر رو به اندازه یک خط بالاتر از بقیه حروف نشون بدیم (مثلا به صورت توان) در این حالت میتونیم با استفاده از دستورات  position و top و واحد ex این کار رو به راحتی انجام بدیم. (مطمئن هستم تا حالا اصلا به ذهنتون نرسیده بود) یا اینکه فرض کنید می خواهید یه ایکن کوچیک مثلا از این ایکن هایی که دارای متن new برای کالاهای جدید هستن (توی سایت های فروش کالا باید دیده باشید) بالای اسم کالا نشون بدید , میتونید از این واحد استفاده کنید. توجه کنید که واحد ex برخلاف واحد های قبلی که ذکر کردم از خیلی قدیمی هست و از css1 موجود است و همه مرورگرها اون رو ساپورت میکنن. میتونید وضعیت ساپورت شدن دستورات css رو از سایت caniuse.com چک کنید.

امیدوارم این پست براتون تازگی داشته باشه و توی طراحی های جدیدخودتون ازش استفاده کنید و صفحات رسپانسیو رو با قدرت بیشتری بسازید.

به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK

می‌خواهید دیدگاهتان را بیان کنید؟