• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

4 2527 ۲۵ آذر ۹۳

به احتمال زیاد شما با طراحی 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 برای اینکار در کامپیوتر خودتون استفاده کنید.

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 4 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

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

  • ‏‏

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram