تخفیف ویژه

ترفندهای حرفه ای CSS ProTips (جلسه آخر) : باکسهایی با Intrinsic Ratio و تایپوگرافی انعطاف پذیر

‏  2 دقیقه
۲۸ آذر ۱۳۹۵

در این مطلب با ادامه ترفندهای حرفه ای CSS ProTips در خدمتتون هستیم.css protips

ساخت باکسهایی با Intrinsic Ratio

برای ساخت یک باکس با Intrinsic Ratio تنها کاری که لازمه که انجام بدین اینه که padding بالا یا پایین رو به div مورد نظر اعمال کنید. کد HTML زیر رو در نظر بگیرید:

<div class="container"></div>

کد CSS زیر رو برای اون اعمال میکنیم:

.container {
  height: 0;
  padding-bottom: 20%;
  background-color: blue;
}

میتونین این کد رو درون این صفحه ببینید. دمویی از اون رو هم در اینجا قرار میدم: همونطور که میبینید برای این div، مقدار ویژگی padding-bottom رو برابر با 20 درصد قرار دادیم. با اینکار Height این div برابر با 20 درصد کل width المنت میشه و همیشه و در هر شرایطی Aspect Ratio اونا 5:1 میمونه و هر چی که سایز مرورگر رو تغییر بدیم، ارتفاع نیز متناسب با اون تغییر پیدا میکنه.

استفاده از root: برای تایپوگرافی انعطاف پذیر

تایپوگرافی برای سایتهایی که واکنشگرا و Responsive هستن رو باید انعطاف پذیر بزاریم تا در هر سایزی بخوبی نمایش داده بشن. شما میتونین فونت سایز رو برپایه ارتفاع و عرض viewport با استفاده از :root محاسبه کنید. برای اینکار بصورت زیر عمل میکنیم:

:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

دیدید که در ابتدا برای root ویژگی font-size رو تعریف کرده و قرار دادیم. درون اون با استفاده از متد calc اون عبارت رو محاسبه کرده و بعنوان font-size قرار دادیم. همونطور که دیدید vw و vh و vmin رو استفاده کردیم و این واحدها هم نسبی هستن و متناسب با ابعاد viewport تغییر میکنن. هم اکنون میتونیم برای المنتهایی که قصد داریم با استفاده از rem سایز فونت رو نسبت به همون root مشخص کنیم و کاری کنیم که متنهای ما منعطف باشن و خودشون رو متناسب با سایز viewport تغییر اندازه بدن. برای اینکار بصورت زیر عمل میکنیم:

body {
  font: 1rem/1.6 sans-serif;
}

بهمین راحتی تونستیم این کار رو انجام بدیم. میتونین دموی زیر رو هم مشاهده کنید: میتونین سایز مرورگر رو تغییر بدین تا ببینید چطور متون از خودشون عکس العمل نشون میدن.

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

امیدوارم از این جلسه خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !