57
تشکر

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

آموزش طراجی رسپانسیو

آموزش طراجی رسپانسیو

اگر شما از آن دسته از کسانی هستید که میخواهید به تازگی از طراحی ریسپانسیو در پروژه های خود استفاده کنید حتما با این سوال روبرو شده اید که از کدام مدیا کوئری ها (Media Query) باید استفاده کرد؟

در این مطلب به معرفی مدیا کوئری های توصیه شده میپردازیم. در ادامه با ما باشید…

این مدیا کوئری ها توسط یکی از فریم ورک های معروف یعنی Bootsrap مورد استفاده قرار میگیرد. پس میتوان از آنها با خیال راحت استفاده کرد. میتوانید در زیر ببینید:

/* Large desktop */
@media (min-width: 1200px) {
  
}
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
  
}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

}
 
/* Landscape phones and down */
@media (max-width: 480px) {
  
}

اولین کوئری مربوط به دستگاه های دسکتاپ با عرض بالای 1200px است. دومین کوئری مربوط به تبلت های در حالت Landscape و باز هم دستگاه های دسکتاپ با کمترین عرض 768px و بیشترین عرض 979px است.

سومین کوئری مربوط به گوشی ها و تبلت ها با عرض کمتر از 767px و آخرین کوئری مربوط به گوشی ها با عرض کمتر از 480px است.

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

 

  • 98 دیزاین می‌گه:

    سلام
    ممنون مفیددددددددددددد بود!

  • رضا می‌گه:

    سلام،
    من یه سایت واکنش گرا درست کردم تو تبلت خودم که سایز 700-800 هست خوبه

    اما تو تبلت آیفون حالت عمودی خوبه اما وقتی تبلت رو به حالت افقی می چرخونی سایت سایزش فیت میشه اما کلا یکم میره به سمت چپ یعنی 50pix به سمت چپ اسکرول می خوره.

    و سوال بعدی اینه که پیشنهاد شما برای ساخت یه سایت واکنش گرا استفاده از چی هستش

  • ایکار می‌گه:

    واقعا دنبال این اندازه ها میگشتم. ممنون

  • AYDA می‌گه:

    تازه با وبسایتتون آشنا شدم خیلی مطالب خوبی دارین همینجوری ادامه بدین…مرسی


  • نظرات این مطلب بسته است.