مفهوم طراحی وب واکنش گرا (RWD) : مجموعه ای از شیوه ها که به صفحات وب اجازه می دهد تا طرح و ظاهر خود را متناسب با عرض صفحه نمایش مختلف ، وضوح تصویر و غیره تغییر دهند. این ایده ای است که شیوه طراحی ما برای چند دستگاه را تغییر داد و در این مقاله ، ما به شما کمک می کنیم تا تکنیک های اصلی مورد نیاز برای تسلط بر طراحی سایت ریسپانسیو را درک کنید.
درک این نکته مهم است که طراحی سایت ریسپانسیو یک فناوری جداگانه نیست .این اصطلاحی است که برای توصیف رویکردی در طراحی وب یا مجموعه ای از بهترین شیوه ها ، برای ایجاد یک طرح بندی که می تواند به دستگاه مورد استفاده برای مشاهده محتوا پاسخ دهد ، استفاده می شود.
امروزه اکثر کاربران برای جستجو مطالب در گوگل از موبایل استفاده میکنند به همین علت نمایش استاندارد سایت در تمامی دستگاه ها، از اهمیت بالایی برخوردار است.
مدیا کوئری
طراحی پاسخگو (ریسپانسیو) تنها به دلیل مدیا کوئری ظاهر شد. مشخصات Media Queries سطح 3 در سال 2009 به عنوان توصیه کاندید در نظر گرفته شد ، به این معنی که برای اجرا در مرورگرها آماده به نظر می رسید. مدیا کوئری به ما امکان می دهد یک سری آزمایش ها را انجام دهیم (به عنوان مثال صفحه نمایش کاربر بیشتر از عرض معینی باشد یا وضوح تصویر مشخصی داشته باشد) و CSS را به صورت انتخابی برای سبک بندی مناسب صفحه برای نیازهای کاربر اعمال کنیم.
سایت های واکنش گرا فقط طرح خود را بین BreakPoint ها تغییر نمی دهند ، آنها بر روی شبکه های انعطاف پذیر ساخته شده اند. یک شبکه انعطاف پذیر به این معنی است که نیازی نیست همه اندازه دستگاه های موجود را هدف قرار داده و یک طرح پیکسل مناسب برای آن بسازید. این رویکرد با توجه به تعداد زیادی از دستگاه های با اندازه های مختلف موجود و این واقعیت که حداقل در دسکتاپ ، مردم همیشه پنجره مرورگر خود را به حداکثر نمی رسانند ، غیرممکن است.
تصاویر ریسپانسیو
شما تصویری را که در بزرگترین اندازه مورد نیاز است تهیه می کنید و آن را کوچک می کنید. این هنوز روشی است که امروزه مورد استفاده قرار می گیرد.
تایپوگرافی پاسخگو
یکی از عناصر طراحی واکنش گرا ، ایده تایپوگرافی پاسخگو بود. در اصل ، این توضیح می دهد که اندازه فونت در مدیا کوئری برای نشان دادن مقادیر کمتر یا بیشتر صفحه نمایش داده می شود.
متاتگ Viewport
این متا تگ به مرورگرهای تلفن همراه می گوید که باید عرض نمایش را روی عرض دستگاه تنظیم کنند و سند را در 100٪ اندازه مورد نظر خود تنظیم کنند ، که سند را در اندازه بهینه شده برای موبایل نشان می دهد.
<meta name="viewport" content="width=device-width,initial-scale=1">
