ایجاد واکنش پذیری در سایز فونت ها + FitText

دسته بندی ها : آموزشگاه 18 ژانویه 2014 خانه وردپرس 784 بازدید

طراحی واکنش گرا (Responsive Web design)، – همونطور که اکثر دوستان مستحضر اند – تقریبا یک موضوع جدید و چند سالی بیشتر از عمرش نمیگذره (May 2010). ولی با توجه به گسترش روز افزون انواع موبایل و تبلت و مبادرت کاربران به استفاده از این دستگاه ها (در وبگردی و انجام انواع امورات اینترنتی)، روز به روز به اهمیت استفاده از طراحی های واکنش گرا (در صفحات وب) افزوده میشه.

طراحی واکنش گرا، قوانین و ساختارهای مخصوص به خودش رو داره و میشه به اندازه چند کتاب در رابطه اش حرف زد! اما در پست امروز، فرض کردیم که دوستان، با کلیات کار آشنایی دارند و به همین خاطر، یک مقدار توجهتون رو  جلب جزئیات میکنیم. ;)

ببینید دوستان عزیز من، بحث واکنش گرایی، تنها شامل مقدار دهی های درصدی (%)، تعریف media و… نیست! به طور کلی، پوسته ای که شما طراحی میکنید؛ از هر نظر باید ساختارهای درستی داشته باشه و همواره در مخاطب این حس رو ایجاد کنه که -با تغییر سایز مرورگر- وبسایت شما کاملا در وضعیتی طبیعی قرار داره و هیچ مشکلی در نظم ساختاری قالب به وجود نیومده! حالا، یک نمونه از مواردی که باعث شکسته شدن این ساختار منظم میشه، ناهماهنگی سایز فونت هاست! یعنی چی؟!

یعنی اینکه، وقتی شما یک سایز رو در CSS (مثلا ۳۰px)، به عنوان (title) مطالبتون اختصاص میدید، این سایز در ابعاد کوچکتر مرورگر هم حفظ میشه و مسلما در این حالت، سبک نمایش خوبی رو نخواهید داشت (چرا که به شکلی قالب شما از توازن خارج شده)! اما، برای رفع این مشکل، راه حل های مختلفی هم وجود داره. یک مورد ساده و کاربردی، استفاده از اسکریپت های جی کوئری تغییر سایز (فونت) که به صورت خودکار – با نسبت گیری از ابعاد محل – اندازه فونت رو تغییر میدن.

من با چند مورد از این اسکریپت ها تا به حال کار کردم. یک نمونه ای که به نظرم از حجم کم و کارایی بالایی برخورداره اسکریپت FitText که در ادامه نحوه استفاده اش رو با هم بررسی می کنیم…

اولین بخش کار، فراخوانی کتابخانه جی کوئری و اسکریپت FitText در قالب (بهتره که فراخوانی، قبل از پایان تگ body باشه):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://demo.alimir.ir/fittext-example/jquery.fittext.js"></script>

و در مرحله بعد نوبت به استفاده از تابع fitText میرسه. برای این منظور، کافیه تا از یک (یا چند) سلکتور، پیش از فراخوانی تابع استفاده کنید. به عنوان نمونه:

JQUERY:

$("#fittext1").fitText();
$("#fittext2").fitText(2.1);
$("#fittext3").fitText(1.2, { minFontSize: '30px', maxFontSize: '75px' });

در قطعه کد بالا، ۳ حالت وجود داره:

  1. حالت اول >> استفاده ساده و بدون هیچ تنظیمی از تابع fitText.
  2. حالت دوم >> همراه با یک عدد در تابع که مقدار حاشیه رو مشخص میکنه. (با افزایش این عدد، به خاطر بیشترشدن حاشیه، فونت کوچکتر میشه)
  3. حالت سوم >> علاوه بر حاشیه، میتونید مقدار ماکزیمم و مینیمم رو هم مشخص کنید تا حدود تغییر سایزها دست خودتون باشه.

و دیگر هیچ… :)

امیدوارم که آموزش مفید بوده باشه!
منبع : دنیای وردپرس و برنامه نویسی – alimir.ir

مطالب زیر را حتما بخوانید:

قوانین ارسال دیدگاه در سایت

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

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

  1. پدرام گفته :
    15:18 2020/05/27

    سلام
    از این کتابخانه چگونه میشه در وردپرس استفاده کرد؟

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.

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

لینک کوتاه :
0