• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

0 105 ۲۸ آذر ۹۵

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

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

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

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

میتونین این کد رو درون این صفحه ببینید. دمویی از اون رو هم در اینجا قرار میدم:

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

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

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

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

بهمین راحتی تونستیم این کار رو انجام بدیم. میتونین دموی زیر رو هم مشاهده کنید:

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

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

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

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

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram