ویرگول
ورودثبت نام
علی خراسانی
علی خراسانی
خواندن ۳ دقیقه·۴ سال پیش

چگونه فونت ها را واکنشگرا (ریسپانسیو) کنیم

برای مدت زمان طولانی، طراحان به دلیل دقت ذاتی و صحت واحد pixel،از این واحد اندازه گیری استفاده میکردند. زمانی که از واحد اندازه گیری pixel استفاده شده باشد،در تمامی دستگاه ها و مرورگر ها این اندازه ثابت خواهد بود ، درحالی این امر با رویکرد واکنش گرایی بودن و انعطاف پذیری که مد نظر ماست تناسبی نداره.

همانطور که اکثرا میدانید زمانی که شما ابعاد را برای ایتم والد تعیین کنید این ابعاد به طور اتومات با استفاده از قانون وراثت به تمامی فرزندان ابعاد را میگرند.

برای مثال تعیین یک مقدار ثابت برای بدنه اصلی صفحه(body) تغریبا بر تمام دیگر عناصر صفحه اثر خواهد گذاشت در این صورت اگر توسعه دهندگان بخواهند به هر عنصر از صفحه استایلی اعمال کنند باید جداگانه به صورت دستی استایلی جدید برای هر عنصر اعمال کنند در نتیجه ، حتی ویرایش ها و اصلاح های کوچک نیاز به تغییرات دقیق تنظیمات قبلی خواهد داشت این امر نi تنها نا خوشایند خواهد بود بلکه میتواند به مشکلات جدی در دستگاه ها و مرورگرها منجر شود زیرا اندازه فونت انتخابی توسط آنها ممکن است با انتخاب های ما تداخل داشته باشد.

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


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

واحد اندازه گیری em برابر با اندازه فونت تعریف شده (به پیکسل) در قانون css است به طور اگر ما متنی به اندازه 16 pixel داشته باشیم به اندازه 1 em است ، 2 em به اندازه 32 pixel , و الی آخر.

عنصری که اندازه قلم آن بر اساس واحد em داده شده باشد در تمامی مرورگرها تغییر اندازه می دهد و نیاز نیست به تک تک عناصر به صورت دستی اندازه اختصاص دهیم .

بدیهی است که استفاده از em مزایا و معایب خود را دارد که باید آن را در نظر داشته باشیم. اگر چه استفاده از آن ، تعمیر و نگهداری سایت را ساده تر میکند اما این امر ممکن است یک توسعه دهنده را که به دنبال آن است تا بتواند اندازه قلم های مورد استفاده اش را خود تعیین و پیش بینی کرده و خواهان کنترل دقیق آن ها باشد، با موانعی روبه رو کند. خوشبختانه این مشکل با استفاد از واحد های اندازه گیری مشابه برای بیشتر محتوا و اعمال این مقیاس تنها بر بخش های خاص مانند header , footer حل خواهد شد.


جمع بندی

مسلما واحد em، تعیین مقیاس قلم را ساده تر میکند و در نتیجه تعمیر و نگهداری سایت نیز به طور قابل ملاحظه ای آسان خواهد بود از این رو می توان از این واحد برای انعطاف پذیری بهتر استفاده کرد.



واکنش گراییریسپاسیوتغییر اندازه فونت
front end developer
شاید از این پست‌ها خوشتان بیاید