کدنویسی و طراحی با لبخند

بخندید و برنامه نویسی یاد بگیرید!

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

هدف ما اینست که سهم هر چند کوچک در آموزش طراحی و برنامه نویسی داشته باشیم و همراه با خنده و تفریح آموزش بدیم!

مشاهده آموزش ها
کل آموزش ها
25
نظرات و عقیده
11
وردپرس
8
آموزش طراحی
5

مراحل طراحی یک قالب وردپرس

طراحـــــی ، قدرت تخیلی در قالب کد

امروزه واکنش‌گرا کردن تایپوگرافی سایت موضوعی مهم در حوزه کسب‌و‌کار اینترنتی محسوب می‌شود؛ به گونه‌ای که باید کاربران در هر دیوایسی بتوانند به بهترین شکل سایت شما را مرور کنند؛ در غیر این صورت شما جایگاهی در اینترنت امروز نخواهید داشت؛ اما نکته‌ی حائز اهمیت این است که باید تایپوگرافی سایت شما نیز به بهترین صورت در هر اندازه‌ی صفحه‌ای خوانا و زیبا باشند؛ اما این کار چگونه امکان پذیر است؟ در این مقاله می‌خواهیم یک ویژگی جدید و جذاب سی‌اس‌اس را همراه با واحد های em و rem توضیح دهیم.

تایپوگرافی در طراحی واکنش‌گرا

واکنش‌گرا کردن تایپوگرافی

 

واحد‌های em و rem در واکنش‌گرا کردن تایپوگرافی

 

چندی پیش برای حل کردن این مشکل، سی‌اس‌اس واحد‌های تایپوگرافی em و بعد از آن rem را معرفی کرد؛ در واقع rem مشکلات واحد em را برطرف می‌کرد و کنترل بهتر و بیشتری به کدنویس می‌داد. اما این واحد‌ها چه فرقی با پیکسل داشتند و چرا بهتر بود به جای px از این واحد‌ها در طراحی واکنش‌گرا استفاده کنیم؟

 

مزیت واحد های em و rem در برابر px چیست؟

 

در واقع این دو واحد، نسبی هستند (Relative units) ، این باعث می‌شود در اندازه صفحه‌های متفاوت، نمایش دقیقی داشته باشید. دقت داشته باشید که به صورت عادی و پیشفرض هر 1em برابر با 16px خواهد بود، که این داستان به تنظیمات خود مرورگر بر‌می‌گردد؛ اما به این موضوع دقت کنید که اگر به تگ body، خاصیت font-size را برابر با 32 پیکسل تعیین کنید، دیگر 1em برابر با 16px نخواهد بود و این مقدار تبدیل به 32px می‌شود. این بدین معناسب که در حالت پیشفرض اگر یک تگ span با سایز فونت 1em داشته باشیم و درون آن مثلا حرف A را بنویسیم، این کاراکتر داخل مربعی به اندازه 16*16 پیکسل قرار خواهد گرفت. برای روشن‌تر شدن موضوع این داستان را عملی نیز نشان می‌دهیم؛ البته یک صفحه اچ‌تی‌ام‌ال نیز برای درک بهتر موضوع برای شما کدنویسی کرده‌ایم.

 

فکر کنید این سی‌اس‌اس ما باشد:

 

 

و این کد‌های اچ‌تی‌ام‌ال ما باشد:

 

 

خواهید دید که دقیقا واحد‌های em برابر با معادل پیکسلی نوشته شده در کامنت‌های جلوی آن‌ها خواهد بود.

See the Pen
em css unit
by EhsanAbafat (@ehsanabafat)
on CodePen.

شما می‌توانید در codepen این موضوع را کاملا ببینید؛ تگ span با واحد پیکسل و تگ p با واحد em مقداردهی شده‌اند، اما در نهایت سایز فونت مشابهی دارند؛ مزیت اصلی ٖآن این است که المنت‌هایی به صورت نسبی مقداردهی می‌شوند با بزرگتر یا کوچکتر شدن تایپوگرافی دچار تغییر در وضع ظاهری نمی‌شوند. در مثال بالا به دکمه‌های Read more دقت کنید.

 

تفاوت em با rem چیست؟

 

تفاوت rem و em

تفاوت rem و em

 

همان‌طور که در تصویر بالا می‌بینید، این دو واحد نسبی یک تفاوت خیلی مهم دارند. وقتی در واحد em ما والد تگی را 1.125em قرار می‌دهیم در واقع ما ۱۸ پیکسل را برای آن خاصیت در نظر گرفته‌ایم؛ این باعث می‌شود برای فرزند‌های آن تگ، از این به بعد، مقدار ۱۸ پیکسل به عنوان 1em در نظر گرفته شود نه ۱۶ پیکسل سابق. یعنی اگر به یکی از تگ های فرزند آن تگ، فونت سایز 1.125em را اختصاص بدهیم، در واقع اندازه فونت آن تگ ۲۰ پیکسل خواهد بود. اگر بخواهیم صادقانه بگوییم، اگر ما تگ‌های تو‌در‌توی زیادی داشته باشیم، این داستان می‌تواند مشکل‌ساز و گیج‌کننده باشد. فکر کنید یک تگی فرزند ۷ تگ دیگر باشد و هر برای هر کدام فونت سایز متفاوتی را اختصاص داده‌اید، قاعدتا محاسبه‌ی این که در واقع 1em این تگ چند پیکسل است، واقعا مشکل است؛ چرا که برای اکثر کدنویسان، واحد پیکسل خیلی قابل لمس‌تر از سایر واحد‌هاست.

 

چرا از em استفاده نمیکنم؟

چون برام مشکله که در هر بار بشینم ببینم این تگ، فرزند کدوم تگ‌هاست و چه‌طور مقدار‌دهی کردم… این وقت تلف کنیه از نظر من… وقتی میتونم با rem راحت اینکارو بکنم، چرا خودمو اذیت کنم؟

 

واحد rem در واقع مخفف Root em هست که در واقع همیشه ثابت است و فرقی ندارد تگ مورد نظر فرزند چند تگ دیگر باشد یا به هر کدام چه مقداری تعیین شود؛ همیشه برابر با واحد em روت (root) خواهد بود.

دقت کنید که اگر مقدار root تغییر داده شود در واقع مقدار 1rem هم دیگر برابر با ۱۶ پیکسل نخواهد بود؛ و مثلا اگر فونت سایز root یا body برابر با ۲۰ پیکسل تعیین شود، در هر کجا 1rem برابر با ۲۰ پیکسل خواهد بود.

 

استودیو ابافت برای درک بهتر تفاوت بین em و rem صفحه CSS units em and rem را برای شما کدنویسی کرده‌است؛ در پایین باکس‌ها، یک رنجی از ۱ تا ۳ وجود دارد که می‌توانید با افزایش و کاهش آن تغییرات سایز فونت هر دو را ببینید؛ اما باکس‌های بالا نیز بدون منظور تعبیه نشده‌اند! در واقع ما می‌خواهیم یک ویژگی جدید از سی‌اس‌اس را به شما بیاموزیم. این ویژگی clamp نام دارد.

 

پراپرتی (خاصیت) clamp در واکنش‌گرا کردن تایپوگرافی

 

وضعیت پشتیبانی مرورگر‌های مختلف از پراپرتی clamp

 

پشتیبانی مرورگر‌های مختلف از خاصیت clamp

پشتیبانی مرورگر‌های مختلف از خاصیت clamp

 

در سایت Caniuse می‌توانید ببینید کدام مرورگر‌ها از کدام خاصیت‌ها پشتیبانی می‌کنند؛ همان‌طور که در تصویر بالا نیز قابل رویت است، ما یک پشتیبانی تقریبا ۹۰ درصدی داریم که مقدار قابل قبولی است و می‌توانیم از آن استفاده کنیم.

 

مزایای استفاده از clamp و تاثیر آن بر واکنش‌گرایی تایپوگرافی

 

با استفاده از این خاصیت می‌توانیم بدون تعریف مدیا‌کوئری‌های طاقت فرسا و زیاد، به راحتی در اندازه اسکرین‌های متفاوت، تایپوگرافی سایت خود را به بهترین نحو به نمایش در‌بیاوریم؛ اگر به صفحه‌ی اچ‌تی‌ام‌الی که برای درک بهتر تفاوت واحد ها ارائه کردیم، نگاه کنید، متوجه خواهید شد که با کوچک‌تر کردن صفحه مرورگر و یا در هنگام استفاده از حالت ریسپانسیو، سایز فونت‌ها تغییر می‌کنند؛ در واقع در مقابل اندازه دیوایس از خود واکنش نشان می‌دهند.

به این نوع توابع سی‌اس‌اسی، در فارسی، می‌توان معادل توابع محاسبه‌ای را در نظر گرفت. مثلا calc هم از این دسته هست.

البته توابع min و max هم وجود دارند؛ اما با استفاده از clamp ما می‌توانیم همه‌ی شروط خود را فقط و فقط در یک خط تعریف کنیم؛ این واقعا جادوی سی‌اس‌اس است! معنی لغوی clamp در فارسی، گیره و منگنه هست؛ یعنی ما سایز‌ها‌را به هم منگنه می‌کنیم؛ برای درک این موضوع می‌توانید به مستندات MDN در مورد clamp مراجعه کنید.

به طور کلی اگر ما به المنتی پراپرتی clamp را به صورت زیر تعریف کنیم:

 

در واقع بدین معناست: تا وقتی که مقدار 2.5vw کم‌تر از 1.8rem باشد، سایز فونت المنت 1.8rem خواهد بود اما به محض اینکه مقدار 2.5vw از مقدار 1.8rem بیشتر شود؛ دقیقا همان لحظه اندازه فونت المنت به مقدار محاسبه شده‌ی 2.5vw تنظیم خواهد شد و دقیقا موقعی که مقدار 2.5vw از 2.8rem بیشتر باشد، سایز فونت المنت روی 2.8rem تنظیم خواهد شد؛ یعنی در واقع ابتدا min سپس به گونه‌ای break point و سپس max را تعیین می‌کنیم و دو سایز حداقل و حداکثر را به کمک پارامتر وسطی به همدیگر منگنه می‌کنیم.

اگر سوالی در مورد این موضوع داشتید، در نظرات همین مقاله آموشی مطرح نمایید؛ در اسرع وقت به شما پاسخ داده خواهد شد.

به نظر می رسد که شما نوتیفیکیشن را مسدود کرده اید!
اشتراک گذاری
شاید این مطالب را نیز بپسندید
دیدگاه یا سوال خود را مطرح کنید
guest
0 نظر/ سوال و جواب
Inline Feedbacks
View all comments
0
اگر سوال یا دیدگاهی دارید ، مطرح کنید!x
()
x