آموزش طراحی قالب رسپانسیو بخش اول

آموزش طراحی قالب رسپانسیو بخش اول

شناسه: 127 آخرین ویرایش: جمعه 01 خرداد 1394

برای اینکه بتوانید یک وب سایت را به صورت Responsive طراحی کنید و آن را در تبلتها و گوشی های هوشمند نیز به خوبی نمایش دهید باید با متا تگ viewport و media query ها آشنا باشید.

بیشتر کار شما با فایل CSS و مدیا کوئری ها خواهد بود و فقط قبل از اینکه به سراغ فایل CSS بروید باید متا تگ viewport را در تگ head قرار دهید.

طراحی قالب Responsive و مدیا کوئری ها

ابتدا باید ابعاد دستگاههای مختلف را مورد بررسی قرار دهید تا بتوانید قالبها را بر اساس ابعاد آنها تنظیم کنید.

ابعاد دستگاههای الکترونیکی:

  1. پهنای صفحه تصویر های بزرگ حداقل 1200 پیکسل است
  2. پهنای صفحه تصویر های متوسط حداقل 992 پیکسل است
  3. پهنای تبلتها حداقل 768 پیکسل است
  4. پهنای گوشی های موبایل را باید کوچکتر از 768 پیکسل در نظر گرفت

حال می توانید ابعاد عناصر درون صفحه را بر این اساس تنظیم کنید.

استفاده از مدیا کوئری ها

اکنون می توانید به کمک مدیا کوئری ها، قالب وب سایت را بگونه ای تنظیم کنید که متناسب با ابعاد دستگاه تغییر کند و نیازی به اسکرول افقی نداشته باشد.

در بخش دوم مقاله در این مورد بیشتر توضیح می دهیم.