این روزها استفاده از موبایل ، تبلت و یا سایر تجهیزات همراه برای مرور و مشاهده صفحات وب سایت ها بسیار همه گیر شده است و اکثر طراحان وب نیز تمایل دارند تا وب سایت آنها در انواع تبلت ، موبایل و یا وسایل دیگر قابل مشاهده و استفاده باشد. در واقع شما با استفاده از اصول طراحی ریسپانسیو یا همان واکنشی قادر هستید تا محتویات صفحات وب سایت خود را با توجه به نوع وسیله مورد استفاده بازدیدکننده وب سایت تنظیم کنید.
فرض کنید وب سایت شما تنها در مرورگرهای رایج توسط کامپیوترهای شخصی به درستی نمایش داده شود. حال اگر برخی بازدیدکنندگان سایت شما از تبلت و یا موبایل های هوشمند امروزی برای مشاهده سایت شما استفاده کنند و صفحات وب سایت شما به درستی نمایش داده نشوند طبیعتا این دسته از بازدیدکنندگان از سایت شما خارج می شوند و این به معنی از دست دادن این بازدیدکنندگان و حتی در برخی مواقع مشتریان خواهد بود.
طراحان وب سایت با استفاده از ترکیب برخی موارد در CSS و ترکیب آنها با جداول شناور میتوانند وب سایت خود را به صورتی طراحی کنند که در تمامی وسایل و تجهیزات به درستی نمایش داده شوند و این یعنی طراحی واکنشی و یا همان Responsive Web Design که در مورد آن صحبت میکنیم.
معمولا در این نوع طراحی بزرگترین مشکل نمایش صحیح تصاویر در مرورگرها و تجهیزات مختلف با صفحه نمایش های متفاوت است. اما شما با استفاده از دستورات نمایش به صورت کامل مانند max-width میتوانید این کار را انجام دهید. در واقع تصاویر شما همواره در اندازه واقعی خود نمایش داده میشوند مگر آنکه در فضای کوچکتری قرار گیرند.
در روش Responsive شما میتوانید فایل های CSS گوناگونی را برای نمایش سایت بر روی دستگاه های مختلف فراخوانی کنید. به عنوان مثال برای نمایش بر روی موبایل یک فایل CSS و برای نمایش در یک دستگاه دیگر از یک نوع فایل CSS دیگر استفاده نمایید.
