آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 47) : آشنایی با واحدهای Viewport - قسمت 3

- visibility ۰ mode_comment

css3 attributes

همونطور که اطلاع دارید در جلسه قبل 2 مثال کاربردی برای استفاده از واحدهای Viewport قرار دادیم و شما رو با اون آشنا کردیم. دیدید که با استفاده از واحدهای Viewport میتونیم کارهای جالبی که قبل از این به سختی انجام میشد رو به راحتی انجام بدیم. در این جلسه یک مثال دیگه رو نیز با هم بررسی کرده و در آخر نیز نکات تکمیلی رو خدمتتون عرض میکنیم.

مثال 3 : ایجاد عنوان کاملا متناسب و به اندازه

به احتمال زیاد در مورد ابزار FitText اطلاعاتی دارید و یا از اون استفاده کردید. این ابزار یک پلاگین jQuery هست که با استفاده از اون میتونین متن مورد نظرتون رو به نسبت المنت Parent خودش، تغییر اندازه بدید. همونطور که قبلا هم گفتیم، واحدهای Viewport مستقیما بر پایه Viewport هستند و با تغییر اندازه Viewport، اندازه این واحدها نیز تغییر میکنه. پس اگر ما از واحدهای Viewport برای ویژگی font-size استفاده کنیم، متنها بصورت متناسب بر روی صفحه نمایش داده میشن. زمانی که عرض Viewport تغییر میکنه، مرورگر بصورت اتوماتیک اندازه متن رو تغییر میده تا به خوبی نمایش داده بشه. تنها نکته ای که در استفاده از این ترفند وجود داره اینه که با استفاده از روش سعی و خطا، مقدار اولیه font-size رو با استفاده از واحدهای Viewport پیدا کنید.

یک مشکل اساسی با مقداردهی font-size به این روش این هست که سایز Viewport در مقایسه با سایز متن خیلی بزرگتر هست و باید حواسمون به این قضیه باشه. مثلا فرض کنید که مقدار ویژگی font-size رو برابر با 8vw قرار بدیم، با اینکار موارد زیر امکان پذیر هستند:

  • برای viewport با عرض 1200 پیکسل، اندازه font-size برابر با 96 پیکسل خواهد شد
  • برای viewport با عرض 400 پیکسل، اندازه font-size برابر با 32 پیکسل خواهد شد
  • برای viewport با عرض 1920 پیکسل، اندازه font-size برابر با 154 پیکسل خواهد شد

همونطور که دیدید در هر شرایطی که امتحان میکنیم، سایز متن خیلی کوچک یا خیلی بزرگ میشه. در اینجا هست که میتونیم با استفاده ترکیبی از تابع calc و واحدهای Viewport سایز مناسبی رو برای font-size قرار بدیم که تایپوگرافی سایتمون رو ارتقا میده. دموی زیر رو در نظر بگیرید: همونطور که دیدید بصورت ترکیبی از واحدهای em و vw در تابع calc استفاده کردیم و با اینکار به هر مقدار که مرورگر رو تغییر رو اندازه بدیم، متن به خوبی و متناسب با Viewport نمایش داده میشه. برای اطلاعات بیشتر در مورد این روش میتونین این لینک رو مطالعه کنید.

نکاتی که باید بخاطر بسپارید

اگر شما تصمیم گرفتید که از واحدهای Viewport درون پروژه خودتون استفاده کنید، تعدادی نکته وجود داره که باید اونا رو بخاطر داشته باشید. زمانی که قصد دارید عرض یک المنت رو با استفاده از واحدهای Viewport مشخص کنید، حواستون رو جمع کنید. مشکل اینجاست که زمانی که برای المنت ریشه ای، مقدار ویژگی overflow برابر با auto قرار میگیره، مرورگر فرض میکنه که scroll bar وجود ندارد و به همین دلیل عرض المنتها یک مقدار از اون چیزی که انتظار میره بیشتر میشه و بعضی اوقات مشکلاتی رو به وجود میاره. فرض کنید که 4 المنت div رو قرار دادیم و میخوایم صفحه رو بصورت کامل با استفاده از این المنتها پوشش بدیم. برای اینکار از کد CSS زیر استفاده میکنیم:

بصورت معمولی با خودمون میگیم که هر div یک چهارم مساحت viewport رو اشغال میکنه. در صورتی که این اتفاق نمیوفته و عرض هر div متناسب با عرض مرورگر بدون در نظر گرفتن scroll bar محاسبه میشه. این مشکل باعث میشه که عرض المنتها از 50% بیشتر بشه و دیگه نمیتونن در کنار یکدیگر قرار داده بشن و به خط بعدی منتقل میشن. دموی زیر رو در نظر بگیرید: اگر در اینجا بجای استفاده از 50vw از 50% استفاده کنیم، مشکل حل خواهد شد. زمانی که قصد دارید عرض یک المنت از نوع Block رو مشخص کنید، از مقادیر درصدی استفاده کنید. چون زمانی که مقادیر درصدی استفاده میشه، scroll bar دیگه دخالتی در محاسبات ندارد.

پشتیبانی مرورگرها از واحدهای Viewport

بر پایه اطلاعاتی که سایت Caniuse در اختیارمون قرار میده میشه متوجه شد که مرورگرهای مدرن از این ویژگی به خوبی پشتیبانی میکنن.

با این وجود هنوز مشکلات و ناهماهنگی هایی در مرورگرهایی مثل IE9 و IE10 وجود داره که با گذشت زمان، اهمیت این موارد کم رنگ تر میشه.

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

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

موفق باشید

یا علی

Source

comment دیدگاه کاربران
ارسال نظرات

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