گرفتن “Erm..” از Ems

یک اندازه فونت پیش‌فرض انعطاف‌پذیر تنظیم کنید

درس اول بازگرداندن نیرو به کاربر است. کاربران را از تنظیم اندازه نوع خود منع نکنید، اما مطمئن شوید که در یک زمین بازی یکسان شروع کرده اید. فونت پایه خود را 100% تنظیم کنید از پیش فرض مرورگر:

سپس ما می توانیم از آنجا کار کنیم.

مقیاس تایپوگرافی ما

ما هنوز باید مشخص کنیم که عناصر مختلف تایپوگرافی ما چقدر بزرگ ظاهر می شوند، به خصوص اگر از تکنیک تنظیم مجدد CSS برای حذف تمام اندازه های پیش فرض استفاده کرده باشیم. یک مقیاس مدولار نسبتاً معمولی چیزی شبیه به این است:

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

ما این مقیاس را به تایپوگرافی خودمان با استفاده از CSS کمی شبیه به این ترجمه می کنیم:

با این حال (همانطور که قبلاً گفتیم) استفاده از مقادیر پیکسل ثابت غیر قابل انعطاف است، بنابراین بیایید آن را اصلاح کنیم.

Em چیست؟

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

1em برابر با اندازه فونت ارثی است. اگر اندازه فونت a <section> روی 16 پیکسل، 1em در آن تنظیم شده است <section> معادل 16 پیکسل است. اگر اندازه فونت آن است <section> به 20px تغییر می کند، 1em در آن <section> معادل 20 پیکسل است.

Ems نام خود را از چاپ گرفته اند. دقیقا زمانی که این اصطلاح برای اولین بار استفاده شد نامشخص است، اما به صورت M (تلفظ می شود امم) از نزدیک نشان دهنده بلوک چاپ مربعی است که حروف چاپی روی آن قرار داده شده است، نام خود را به اندازه گیری نشان می دهد. اندازه نقطه فونت مورد نظر هر چه باشد، بلوک حروف بزرگ M، Em را تعریف می کند.

Em معمولاً یک لمس بزرگتر از شکل حروف است، اما شما ایده را دریافت می کنید.

چگونه پیکسل ها را به Ems تبدیل کنیم

ما قبلاً شروع به تنظیم مقیاس تایپوگرافی خود در پیکسل کرده‌ایم، بنابراین چگونه آن را به ems تبدیل کنیم؟ یک محاسبه ساده که اندازه فونت مورد نظر را در رابطه با اندازه فونت بدنه بیان می کند:

با استفاده از اندازه بدنی که ما 16 پیکسل در نظر می گیریم و هدف آن تبدیل 36 پیکسل است <h1>، ما گرفتیم:

در اینجا نحوه تبدیل مقیاس ما با استفاده از روش بالا آمده است:

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

مسائل مربوط به آبشار

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

حالا به این قطعه نشانه گذاری بی گناه نگاهی بیندازید:

همانطور که انتظار دارید، همه چیز به خوبی در مرورگر ظاهر می شود. هم پاراگراف و هم لنگر با اندازه 1.2em، نسبت به اندازه فونت بدنه نمایش داده می شوند. (1.2 * 16px = 19.2px).

با این حال، اگر بخواهیم لنگر دوم را معرفی کنیم در داخل پاراگراف، بیایید ببینیم چه اتفاقی می افتد:

اندازه لنگر درون پاراگراف هنوز 1.2em است، اما اکنون نسبت به پاراگراف والد است که در حال حاضر 19.2px است – (1.2 * 19.2px = 23.04px). این به ما لنگرهای بزرگی در برخی از قسمت‌های صفحه ما می‌دهد. به سختی مطلوب

رفع

هیچ راه حلی برای این وجود ندارد. آخرین کاری که می خواهید انجام دهید اضافه کردن یک قانون اضافی برای کاهش اندازه لنگرها است که اتفاقاً در پاراگراف ها وجود دارد – این یک بلیط یک طرفه به Migrainesville است. به منظور حفظ CSS و HTML خود، مهم است که آن را ساده نگه دارید.

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

این باید کمک کند! استفاده از Ems به این معنی است که گاهی اوقات باید به سختی فکر کنید، اما انجام این کار شما را مجبور می کند تا عمل خود را تمیز کنید و در کدنویسی خود کارآمد باشید.

Rems

Rems مفید هستند و دقیقاً مانند ems رفتار کنید، بدون آبشار. هر Rem که تعریف می کنید نسبت به اندازه فونت بدنه است. پشتیبانی است آنقدر که این روزها نیاز دارید.

در مورد استفاده از Ems در جاهای دیگر چطور؟

ما CSS را پوشش داده ایم font-size ویژگی؛ اولین قدم معقول برای استفاده از ems است، اما اکنون بیایید به آن نگاه کنیم line-height. اگر تا به حال خاصیتی وجود داشته باشد که فریاد بزند “از مقادیر پیکسل استفاده نکنید”، آن خط ارتفاع است.

در این مورد ما در واقع بهتر است از a استفاده کنیم ارزش بدون واحد. درست است، فقط یک عدد. بدون پیکسل یا ems یا هیچ چیز. مقادیر بدون واحد تنها راه تضمین این است که فرزندان یک عنصر یک خویشاوند را به ارث می برند line-height. حتی استفاده از ems می تواند به این معنی باشد که الف مقدار محاسبه شده به عناصر تودرتو منتقل می شود.

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

عناصر ساختاری

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

اگر در مورد چیدمان های سیال صحبت می کنیم، از مقادیر % برای تعیین عرض هر عنصر استفاده کنید، یا اجازه دهید Flexbox و CSS Grid اندازه گیری را برای شما انجام دهند.

• 

  CSS Grid در مقابل Flexbox: کدام را باید استفاده کنید و چه زمانی؟

  

  آنا مونوس

  18 ژوئیه 2021
• 

  راهنمای جامع تراز Flexbox

  

  آنا مونوس

  23 مه 2021

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

اگر نیاز به تعریف الف دارید height (که در طرح‌بندی‌های انعطاف‌پذیر می‌تواند مشکل باشد) از ems نیز استفاده کنید. شاید شما در حال ساخت یک ناوبری هستید و نیاز دارید که ارتفاع پیوندهای منو را مشخص کنید – آنها باید با اندازه فونت بزرگ و کوچک شوند.

گوشه های گرد روی یک دکمه؟ را تنظیم کنید border-radius با استفاده از ems، بنابراین همه چیز یکپارچه مقیاس می شود. آن را در این قلم تعاملی امتحان کنید. بدن را تغییر دهید font-size تا 200% و ببینید چه اتفاقی برای هر دکمه می افتد.

سایه متن، سایه جعبه، همینطور.

RWD

و اگر نیاز به تغییر اندازه دارید همه چيز تحت شرایط خاص، مانند درگاه های دید کوچکتر؟ اندازه فونت پایه بدنه را در جستجوی رسانه مناسب تغییر دهید body { font-size: 90%; } و وام کل سایت شما در مدت زمانی که طول می کشد تا اینتر را فشار دهید مقیاس می شود.

نتیجه

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

بیشتر بدانید

• پیکسل ها در مقابل واحدهای نسبی در CSS: چرا هنوز هم مشکل است توسط کاتلین مک ماهون
• pxtoem.com ابزار تبدیل
• چگونه یاد گرفتیم که اندازه فونت پیش‌فرض را به حال خود رها کنیم و em را در آغوش بگیریم توسط گروه فیلامنت
• چرا Ems؟ توسط کریس کویر
• Em (تایپوگرافی) در ویکی پدیا
• می توان از اندازه قلم با rem اجتناب کرد توسط هری رابرتز (رویکردی که این روزها کمتر مورد توجه قرار گرفته است)
• Mixins برای اندازه فونت Rem توسط کریس کویر (اگر به SASS اطمینان دارید)
• توضیحی در مورد ems در مورد “عناصر سبک تایپوگرافی به کار رفته در وب”