Kaptain Kitty
دسته ها :Html و Css
انتشار :۴ شهریور ۱۳۹۳
بازدید :856 بار

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

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

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

طراحی پاسخگو

طراحی پاسخگو

 

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

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

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

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

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

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

برچسب‌ها, , , , ,

مطالب مرتبط

بهتر از من می دانید که دنیای برنامه نویسی هر روز با تغییرات جدی روبه رو است. هر روز که صفحات اینترنتی را باز می کنید می بینید که فریم ورک جدیدی وارد بازار شده که تا دیروز حتی اسمش را هم نشنیده بودید. با کمی تحقیق می بینید که اتفاقا بسیار کارامد هم هست. […]

نمی دانم برای شما هم پیش آمده است که روی پروژه ای مشغول کدنویسی باشید که در آن از افکت های سنگین ۳ بعدی و انیمیشنی بخواهید استفاده کنید یا خیر؟! اما من در چند وقت گذشته در یک پروژه ی وب اپلیکیشن مشغول کد نویسی بودم که هدفش انیمیشن سازی آنلاین در وب است. یک برنامه شبیه […]

یکی از بهترین و فوق العاده ترین پلاگین های جاوااسکرپیتی، پلاگینی است با عنوان ai2html، که کوتاه شده ی عبارت Adobe Illustrator to html می باشد. به طور خلاصه: می توانید فایل گرافیکی ساخته شده توسط نرم افزار Adobe Illustrator را به کدهای html تبدیل کنید. و این یکی از هیجان انگیزترین کارهای ممکن در وب است. […]

در این مقاله می خواهیم نگاهی داشته باشیم به مبحث JavaScript Templating یا همان مدیریت و ایجاد تمپلیت در وبسایت توسط جاوااسکریپت. در وحله ی اول بهتر است ببینیم تمپلیت های جاوااسکریپت چه معنایی دارند، چه زمانی باید از آنها استفاده کنیم و اینکه چگونه می توان آنها را پیاده سازی نمود. خوب است بدانید که موتورهای […]

نظراتتان را برایمان بنویسید

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

مطالب ما تو این شبکه های اجتماعی هم پخش میشه