طراحی وب مدرن ۱۰۰% باید ریسپانسیو یا همان واکنش گرا باشد و کتابخانه های زیادی به طور روز افزون انجام این کار را برای ما آسان می کنند.

با پلاگین های رایگانی مثل  ResponsifyJS امکان اینکه ما صفحات سایت خود را با همه دیوایس خا هماهنگ کنیم خیلی ساده تر میسر می شود. این پلاگین اول نگهدارنده(Container) عکس ها را می گیرد و سپس به طور اتوماتیک آنها را با توجه به سایز صفحه مرتب می کند.

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

پلاگین  ResponsifyJS دقیقا این مشکل را حل کرده است.این پلاگین می تواند به صورت اتوماتیک کار کند و برای دقیق تر شدن می توانید منطقه فوکوس را به آن بدهید تا آن منطقه همیشه دیده شود.

این مناطق فوکوس به صورت اعداد اعشاری (از ۰ تا ۱) باید داده شوند مثلا .۵ معادل ۵۰% است(یا چپ/راست یا بالا/پایین) .شاید مشخص کردن دستی این اعداد کمی سخت باشد ولی خوشبختانه یک نرم افزار ساده برای محاسبه این اعداد وجود دارد که می توانید موقعیت ها را در آن حساب کنید.

فقط کافیست عکس را در آن آپلود کنید بعد منطقه فوکوس را مشخص کرده و کد تولید شده را در پایین صفحه به سایت خود کپی کنید.

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

منبع