در طراحی وب هیچ الگوی واحدی برای همه موقعیت ها وجود ندارد. هر پروژه ای تمرکز ,الزامات و مخاطبان خاص خودش را می طلبد. امیدوارم این مقاله به شما کمک کند بهترین تصمیم را با توجه به مزایا و معایب هر کدام از روش ها اتخاذ کنید . جفری ون می گوید : ” روز به روز به تعداد دستگاه ها , پلتفرم ها و مرورگرهایی که نیاز دارید با آنها کار کنید بیشتر می شوند . طراحی واکنش گرا (Responsive) یک تغییر اساسی در نحوه ساخت وب سایت ها برای دهه های آینده است”.
طراحی واکنش گرا (Responsive Webdesign) چیست ؟
طراحی واکنش گرا به نوعی از طراحی می گویند که خود را با هر تعداد از دستگاه های کاربران انتطباق دهد و به هم نریزد .از زمان ارايه CSS همواره تطابق با انواع رسانه ها بخش جدایی ناپذیر آن بوده اند . اگر قبلا شیوه نامه ای مخصوص چاپ نوشته باشید حتما با این مفهوم آشنایی دارید
<link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" />
مثال های بیشتر را درhttp://mediaqueri.es ببینید
4 فریم ورک آماده برای طراحی ریسپانسیو
طراحی انطباقی (Adaptive) بر پایه یک ایده ساده استوار است .به جای استفاده از اندازه درصدی از اندازه های ثابت (مثلا پیکسلی) بر اساس طول مرورگر برای اجزای صفحه تعریف می کنیم و نکات شکست (Breakpoint) در نظر می گیریم که اگر عرض مرورگر از این نقاط شکست کمتر یا بیشتر شد صفحه خود را منطبق کند . طراحی ریسپانسیو ترکیبی از طراحی سیال (Fluid) و طراحی انطباقی (Adapt) است یعنی از واحد های اندازه گیری نسبی (relative) طراحی سیال و از نقاط شکست طراحی انطباقی استفاده می کند.
شروع کار
کلید طراحی واکنش گرا , مدیا کوئری ها (Media queries) هستند که ما را قادر می سازند استایل های مختلفی طبق نسبت ها , طول و عرض, نوع صفحه نمایش و … اعمال کنیم ولی معمولا از min-width
و max-width
استفاده می شود.
/* 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) { ... }
تصاویر منعطف
برای نمایش صحیح تصاویر در طراحی واکنش گرا راه های مختلفی وجود دارد که یکی از آنها استفاده از کد زیر است تا همه تصاویر صفحه که با تگ Img
اضافه شده اند به صورت مناسب نمایش داده شوند
img { max-width: 100% }
مرورگر های وب این روزها روی XBOX, PlayStation و حتی بعضی از تلویزیون ها نیز وجود دارند. شاید فردا یک مرورگر وب را روی قهوه جوش دیدید .کی می دونه! اگر از طراحی واکنش گرا استفاده کرده باشیم و سایت مان را برای صفحات کوچک بهینه سازی کرده باشیم در آینده حتما مشکلات کمتری خواهیم داشت و کاربران می توانند به راحتی از آن استفاده کنند .
مطالب مفیدی بیان شده..خسته نباشید و سپاس.
باتشکر
مطلب بسیار کاربردی بود
موفق باشید
درود بر استاد زمانی عزیز…!
وب پیج و تاپیک های به روزی دارید
خدا قوت…!
سلام دوست من . شما لطف دارید ممنونم 🙂
سلام.واقعا وبسایت خوبی دارید
سلام همکار گرامی
مطالب ارزندهای دارید که از برخی از آنها در اتاق فکر تیم طراحی سایت وب یار استفاده کردم .
متشکرم
سلام دوست من
خیلی خوشحالم مفید بوده 🙂
موفق باشید