مدیا کوئری ها در طراحی رسپانسیو

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

مدیا کوئری یک دستور css است که کاربرد های متعددی دارد , یکی از کاربرد های مدیا کوئری تشخیص اندازه صفحه مرورگر است , ما با تشخیص اندازه صفحه مرورگر میتونیم محتوای صفحه خودمون رو طوری درون صفحه بچینیم که مناسب با اندازه صفحه باشه.

طریقه ی استفاده از مدیا کوئری به صورت زیر است:

در مثال بالا اومدیم و یک مدیا کوئری با استفاده از دستور media درون css خودمون تعریف کردیم. دوستان عزیز دقت کنید که دستورات css درون این مدیا کوئری برای سایز های کوچکتر از ۷۰۰ پیکسل فعال خواهد شد.(کافیه عرض مرورگر خودتون رو کاهش بدید تا کمتر از ۷۰۰ پیکسل بشه و نتیجه ی حاصل رو ببینید. برای پیش نمایش اینجا کلیک کنید!)

مدیا کوئری میتونه دو مقدار max-width و min-width داشته باشه که مشخص کننده حداقل و حداکثر سایزی از عرض مرورگر است که دستورات درون مدیاکوئری مورد نظر فعال هستند. شما برای استفاده ی همزمان از دستورات min-width و max-width در مدیا کوئری میتونید اونها رو باهم به صورت and یا or به کار ببرید مثلا به مثال زیر دقت کنید:

در مدیا کوئری میشه نوع دستگاه رو نیز معین کرد و دستورات css خودمون رو مختص به دستگاه های مختلف نوشت مثلا screen برای مانیتور ها و printer برای دستگاه های چاپ استفاده میشه , اگه بخواید که دستورات Css شما در همه ی دستگاه ها اجرا بشه میتونید از کلمه ی all استفاده کنید. به مثال زیر دقت کنید:

مدیا کوئری رو میتونیم با دستور link ترکیب کنیم تا فایل های Css خارجی ما با توجه به مدیا کوئری ما اجرا شوند به مثال زیر دقت کنید:

در مثال بالا از دستور media در دستور link استفاده کردیم , دقت کنید که همه ی فایل های Css خارجی لود میشن اما دستورات درون فایل ها وقتی روی صفحه ی شما اعمال میشن که شرط درون قسمت media برقرار باشه 😀 شما هم میتونید از دستور media@ درون فایل css خودتون استفاده کنید و هم از دستور media هنگام کار با link استفاده کنید 😀

دوستان عزیز دقت کنید که شما این توانایی رو دارید که تعداد زیادی از مدیا کوئری ها رو درون صفحه خودتون برای سایزهای مختلف از صفحه های نمایشگر بنویسید , مثلا به مثال زیر دقت کنید:

در مثال بالا تعدادی مدیا کوئری نوشتیم که هر کدوم در بازه ی مختلفی از اندازه های صفحه ی نمایشگر Css های مورد نظر ما رو فعالسازی و یا غیر فعال میکنه 😀

برای اینکه بتونیم یک سایت ریسپانسیو رو درست به کاربر نمایش بدیم باید ابتدا اندازه نمایشگر کاربر رو بگیریم و مطابق با اندازه نمایگشر کاربر, سایت رو نمایش دهیم. اما نترسید 😀 ما برای همه نمایشگرها طراحی جداگانه ای انجام نمیدهیم. فقط کافیه که اندازه های استاندارد رو بدونید و براشون طراحی انجام بدید. اندازه های استاندارد نمایشگرها به صورت زیر است:

  • برای نمایشگرهایی که عرض آنها کمتر از ۳۲۰px است.
  • برای نمایشگرهایی که عرض آنها کمتر از ۴۸۰px است.
  • برای نمایشگرهایی که عرض آنها کمتر از ۶۰۰px است.
  • برای نمایشگرهایی که عرض آنها کمتر از ۷۶۸px است.
  • برای نمایشگرهایی که عرض آنها کمتر از ۹۰۰px است.
  • برای نمایشگرهایی که عرض آنها کمتر از ۱۲۰۰px است.

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

دوستانی که سوال یا انتقادی دارند میتونن اون رو از بخش نظرات پایین این پست با من درمیون بزارن 😀 نظر شما باعث دلگرمی من میشه پس نظر بدیدددد.

به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK
  1. راستی اول باید چطور شروع به طراحی ریسپانسیو کرد؟
    قائده اول طراحی چیه؟؟

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

  2. ممنون از توضیحات خوب و مفیدتون
    سوالم اینه که میشه تو یه سند هم از مدیا کوئری بصورت internal استفاده کرد و هم external???

    • بعله میشه. اما دقت کنید که اگه شما مثلا یه دستور color رو درون مدیاکوئری internal استفاده کنید و همون دستور color رو نیز درون مدیاکوئری external نیز استفاده کنید , دستورات internal از اولویت بالاتری برخوردار خواهند بود.

  3. منظورم این بود که برای بعضی از قسمت ها بصورت internal باشه و بعضی دیگه external
    پس به اون شکل هم میشه!
    مرسی از پاسختون
    موفق باشید

می‌خواهید دیدگاهتان را بیان کنید؟