کتاب آموزش برنامه نویسی Ext JS
برای اولین بار در ایران
Ext JS
در مورد Ext JS بیشتر بدانید
خرید کتاب
راهنمای ۲۰۱۴ برای طراحی ریسپانسیو (Responsive) – قسمت سوم
دسته بندی ها :Html و Css
۴ شهریور ۱۳۹۳
887 بازدید

فریم ورک های ریسپانسیو سمت کلاینت

فریم ورک های سمت کلاینت مثل Bootstrap و Foundation مدتی است که به بازار عرضه شده اند اما اخیرا تبدیل به فریم ورک های ریسپانسیو شده اند. به عبارت دیگر، grid های آنها از ابتدا با تفکر ریسپانسیو بودن طراحی شده اند. این یک قدم فوق العاده بزرگ به جلو است زیرا اکثر مواقع شما هرگز نیازی به محاسبه ی grid شناور نخواهید داشت. بلکه grid های ریسپانسیوی که در فریم ورک های سمت کلاینت امروزی بلافاصله عمل می کنند.

برای مثال، تمپلیت زیر از فریم ورک Foundation را در نظر بگیرید:

طراحی پاسخگو

طراحی پاسخگو

 

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

تصاویر ریسپانسیو

ورای رزولوشن های صفحات مختلف، طراحان وب اکنون با چالشی دیگر در تراکم پیکسل های مختلف رو به رو هستند. گوشی های موبایل، تبلت ها، لپ تاپ ها و حتی برخی از دسکتاپ ها دارای دو برابر یا حتی سه برابر تعداد پیکسل هستند. بهترین روش برای مدیریت کردن صفحه نمایش هایی با DPI بالا این است که از روش SVG first استفاده شود. به عبارت دیگر، به غیز از تصاویر، همه چیز باید یک SVG باشد زیرا آنها می توانند با هر رزولوشنی منطبق شده و اندازه ی فایل های آن هم معمولا کوچک است.

اگر عکس ها یا هر نوع تصویر JPEG مورد نیاز باشد (که تقریبا همیشه هم مورد نیاز است)، شما می توانید اندازه ی آنها را به دو برابر اندازه ی container والد خود تغییر دهید. بنابراین برای مثال، اگر والد دارای عرض ۴۰۰ پیکسل باشد، تصویری که داخل آن است باید حداقل ۸۰۰ پیکسل شود. هنگامی که خصوصیت background-size به ۵۰ درصد یا کمتر تنظیم شده باشد، این حقه برای تصاویر پس زمینه هم کار می کند.

البته اگر شما به چیزی قدرتمند تر برای بیشتر تصاویر نیاز دارید، باید روش های جدید تر تصاویر ریسپانسیو را بررسی کنید. انجمن مربوط به تصاویر ریسپانسیو بر روی رویکردی در سمت کلاینت کار می کردند که به دو شکل المان <picture> و ویژگی srcset  برای المان <img> ایجاد شد. پشتیبانی مرورگر هنوز اعمال نشده است اما آنها یک polyfill جاوا اسکریپت هم ارائه می دهند که امروزه امکان دیدن این ویژگی ها را میسر می کند.

یک راه حل دیگر هم Zurb Interchange هست که از ترکیب ویژگی های داده های HTML و جاوا اسکریپت استفاده می کند. در واقع این ویژگی متعلق به فریم ورک Foundation است که در بالا از آن نام برده شد.




نظراتتان را با ما در میان بگذارید

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