Respond.js : پشتیبانی نسخه های قدیمی Internet Explorer از Media Query

- visibility ۴ mode_comment

به احتمال زیاد شما با طراحی Responsive ( واکنشگرا ) آشنا هستین. شما میتونین با استفاده از Media Query ها که در CSS3 معرفی شدن ، مشخص کنید که در عرضهای مختلف مرورگر ، استایلهای متفاوتی اعمال بشه و میتونین با همین روش سایتی طراحی کنید که بر روی همه اندازه ها بخوبی نشون داده بشه و کاربر از سایتتون لذت ببره و تجربه کاربری خوبی کسب کنه.

بزارین یه مثال بزنم. فرض کنید میخوایم سه تا استایل متفاوت ایجاد کنیم که در عرضهای مشخصی از مرورگر کاربر ، اعمال بشه و رنگ Background رو عوض کنه. برای اینکار در ابتدا یک فایل بنام index.html بسازین و کدهای زیر رو درونش قرار بدین :

تا اینجا که چیز خاصی برای توضیح وجود نداره. در قسمت head یک فایل بنام style.css به صفحه اضافه کردیم. در این فایل کدهای CSS خودمون رو قرار میدیم. بصورت زیر :

در ابتدا که برای p خودمون یک استایل ساده در نظر گرفتم و در انتها هم سه Media Query نوشتم ، که هر کدوم در اندازه ی مشخصی اجرا میشه. از 1025px به بالا ، بکگراند قرمز هست. بین 768px و 1024px بکگراند زرد رنگ هست. از 767px به پایین هم ، سبز رنگ هست.

این Media Query ها در آخرین نسخه ی مرورگرها بخوبی پشتیبانی میشه. خروجی :

بیشتر از 1025px :

large

بین 768px و 1024px :

medium

کمتر از 767px :

small

اگر برید در IE11 و IE10 و IE9 هم امتحان کنین بخوبی کار میکنه. اما مشکل اینجاس که بر روی IE8 و نسخه های قدیمی تر اون اصلا کار نمیکنه ، بدلیل اینکه این مرورگرها از Media Query ها پشتیبانی نمیکنن.

اینجا هست که باید به فکر راه حل باشیم. Respond.js مشکل مارو حل میکنه. این فایل سبک و سریع برای اضافه کردن پشتیبانی IE8 به پایین از Media Query ها ساخته شده و اساس کار این ابزار بر پایه استفاده از Ajax هست. فقط کافیه که این فایل رو بعد از تمام فایلهای مربوط به CSS قرار بدین و در قسمت head هم باشه، بهتره. یعنی بلافاصله بعد از کدهای CSS خودتون قرارش بدین.

برای اینکه این فایل فقط در IE8 و پایینتر لود بشه ، از دستورات شرطی HTML استفاده میکنیم. بعد از اینکه اینکارو کردیم ، کدهای فایل index.html بصورت زیر میشه :

شما میتونین از صفحه مورد نظر در سایت Github مربوط به Respond فایلهاشو دانلود کنید. اما من فایل respond.min.js رو در انتهای همین مطلب براتون قرار دادم که میتونین از اون استفاده کنین.

فقط نکته ای که در مورد استفاده از Respond.js مونده که بهتون بگم ، اینه که چون این ابزار از Ajax استفاده میکنه ، حتما باید بر روی سرور اجرا بشه. شما میتونین از wamp یا xampp برای اینکار در کامپیوتر خودتون استفاده کنید.

خب دوستان خسته نباشید.

امیدوارم بدردتون بخوره.

موفق باشید. یا علی

comment دیدگاه کاربران
امیر

ممنون خیلی عالی

خواهش میکنم
موفق باشید

وحید

اقا خیلی ممنون …دستتون درد نکنه

محمد اسفندیاری

موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.