ایجاد: ۱۷:۵۲ ۱۳۹۱/۶/۱۴
ویرایش: ۱۹:۴۱ ۱۳۹۲/۸/۲۹

آموزش‌ها

»

استفاده از Media Queries ها و اصلاح عدم پشتیبانی IE6-8

برای طراحی وب واکنشی (responsive web design) روشی نوین در طراحی است بجای طراحی بخش مجزایی برای موبایل و قرار دادن آن در یک آدرس غیر از آدرس بخش‌های غیرموبایلی، از همان طراحی موجود استفاده می‌کنند.
سایت فعلی (9px.ir) یک نمونه آن است. در اینگونه سایت‌ها، ويژگی لایه‌ها و محتویات حسب سایز صفحه تغییر می‌کند. سال‌ها پیش این کار فقط به کمک جاوا اسکریپت میسر و متداول بود اما در سال‌های اخیر، تمامی مرورگرهای مدرن از این خاصیت پشتیبانی می‌کنند و دیگر نیازی به جاوا اسکریپت نیست. این خاصیت (تعریف استایل خاص برای عرض خاص) در اصطلاح css media query نامیده می‌شود.
مدیا کوئری را به دو صورت می‌توان استفاده کرد. یکی لود css مربوط به یک مدیاکوئری در یک فایل مجزا:
<head>
<link rel="stylesheet" media="all and (min-width: 1002px) and (max-width: 1247px)" href="978.css" />
<link rel="stylesheet" media="all and (min-width: 768px) and (max-width: 1001px)" href="748.css" />
<link rel="stylesheet" media="all and (min-width: 320px) and (max-width: 469px)" href="300.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>page title</title>
</head>
و روش دوم هم استفاده از مدیا کوئری با استفاده از ساختار زیر در کنار سایر کدهای css است:
.myClass{color:red;}
#myId{z-index:1;}
@media screen and (min-width: 400px) and (max-width: 700px) {
    .myClass{color:blue;}
    #myId{z-index:2;}
}

تنها مشکلی که وجود دارد، مربوط به نسخه‌های قبل از Internet Explorer 9 می‌باشد که برای حل این مشکل راه‌حل‌های متعددی توسط جاوا اسکریپت و بعضا با کمک کتابخانه جی‌کوئری، ارائه شده است.
چند نمونه از راه‌حل‌های ارائه شده توسط اساتید فن:

آیا مدیا کوئری فقط برای سایز است؟

بسیاری تصور می‌کنند که مدیاکوئری صرفا برای اعمال یک مجموعه استایل خاص برای یک محدوده width یا height مشخص است در حالی که اینطور نیست و مثلا در اینجا می‌توانید تعدادی از کاربردهای دیگر آن را نیز ببینید. مثلا با کمک کوئری luminosity می‌توانید حسب نور محیط کاربر، استایل مختلفی اعمال کنید. طبعا هر مدیاکوئری‌ها در صورتی قابل استفاده هستند که device مربوطه آن را ساپورت کند مثلا برای اجرای این مدیاکوئری لازم است در دستگاه کاربر، سخت افزار مربوط به سنجش نور وجود داشته باشد:
@media (luminosity: dim) { /*اگر نور محیط بسیار کم است به حالت مناسب برای شب درمیآید*/
  p { background: #222; color: #ccc }
}
@media (luminosity: washed) { /*اگر کاربر در محیط بسیار پرنور (مثل نور روشن محیط بیرون) است، کنتراست بالا میرود*/
  p { background: white; color: black; font-size: 2em; }
}
@media (luminosity: normal) { /*اگر کاربر در حالت عادی است*/
  p { background: url("texture.jpg"); color: #333 }
}

یادداشت‌های مرتبط
  1. سرویس های آنلاین رایگان برای نوشتن، تست و بهینه سازی کدهای برنامه نویسی
  2. معرفی برخی اسلایدرهای جی‌کوئری
  3. استفاده از فونت دلخواه در صفحات وب
  4. انیمیشن با CSS
  5. طراحی وب واکنشی
  6. روش های بهبود کیفیت آپلود فایل ها از طریق فرم های صفحات وب
  7. تشخیص و کشف نوع، نام و مشخصات مرورگر کاربران سایت
  8. پلاگین هایی برای کار با فرم های ورود اطلاعات
  9. قلمرو متغیرها در پی‌اچ‌پی و جاوا اسکریپت
  10. اعتبارسنجی و شکل‌دهی فرم‌ها با استفاده از html5
  11. دسترسی کامل به عناصر آدرس در جاوا اسکریپت
  12. حذف درخواست اضافه تصویر انیمیشن لودینگ
  13. ادیتورهای محتوای غنی‌شده برای صفحات وب
  14. برنامه نویسی اندروید
  15. درباره نود جی اس
  16. افکت‌های متن با جاوا اسکریپت و جی‌کوئری
  17. لینک اسکرول به بالای صفحه
  18. خطا در جاوا اسکریپت
  19. پایگاه داده در جاوا اسکریپت
  20. روش‌ها و تکنیک‌های پنهان کردن ایمیل
  21. پیمایش و منو برای یک صفحه
  22. کنترلرهای اسلایدی
  23. زوم (zoom) و بزرگنمایی تصویر و متن با جاوا اسکریپت و پی اچ پی
  24. کشف فونت‌های نصب شده در کلاینت
  25. بازی با زمان!
  26. کار با تصاویر در سمت کاربر
  27. هنر css نویسی (نکاتی برای بهتر نوشتن استایل صفحات وب)
  28. بهینه سازی آنلاین سی‌اس‌اس و جاوا اسکریپت
  29. نکات و ترفندهایی برای قالب‌دهی به نمای چاپ صفحات وب
  30. چند لینک جامع برای یادگیری جاوا اسکریپت
  31. انواع راه‌های تولید کد QR با پی اچ پی و جاوا اسکریپت
  32. پلاگین‌های جی‌کوئری برای استفاده بهتر از خدمات گوگل

مدیریت

نام وسیله

اعتبار ورود

نام کاربری

رمز عبور

رمز یکبارمصرف

... لیست تمام آموزش‌ها

تبلیغات

ربات‌های تلگرامی:
مجموعه ربات‌های تلگرامی ما برای ساده‌تر کردن کار با تلگرام و مدیریت کانال و ...
خرید هاست (فضا):
دنبال یک هاست به صرفه برای شروع کار می‌گردید؟
مشخصات و قیمت‌های این مورد رو ببینید. من سال‌ها مشتری‌شون بودم و پشتیبانی‌شون هم خوب بود.
دامنه‌های فروشی:
دامنه‌های زیر مربوط به ما یا مشتریان ماست که قابل فروش هستند. در صورت تمایل به خرید یکی از آنها، مبلغ پیشنهادی را از طریق فرم ارتباطی برای ما ارسال نمایید.

دامنه‌هایی که می‌تواند مصرف مذهبی داشته باشد:
دامنه‌هایی که می‌تواند مصرف تخصصی داشته باشد:
دامنه‌هایی که می‌تواند مصرف شخصی/عمومی داشته باشد: