تاریخچه طراحی وب سایت ریسپانسیو به سال 2010 بر می گردد که از آن زمان این نوع سایت ها پا به عرصه ظهور نهاد. اما در طول این سه سال تغییراتی در طراحی سایتهای ریسپانسیو که توسط طراحان وب انجام میگرفت به وجود آمد. در بخش زیر می توانید مقاله به زبان اصلی را ار سایت ویکی پدیا در خصوص این نوع سایت ها مطالعه نمایید.
طراحی ریسپانسیو امروزه بسیار گسترش پیدا کرده که به دلیل استفاده بسیار و در حال افزایش کاربران از موبایل و تبلت برای رویت وب سایت می باشد. طبق
می توانید از استفاده نمایید تا سایز فونت ها را مطابق با عرض صفحه تعیین نماید.@media (max-width: 640px) {body {font-size: 1.2rem} } @media (max-width: 1100px) {body {font-size: 1.5rem} }
[h=2]استفاده از فریم ورک ها همه چیز را ساده می سازد[/h]در دنیای ریسپانسیو فریم ورک هایی وجود دارند که با استفاده از آنها می توانید لایه بندی و قالب سایت خود را طراحی نماید. در حقیقت قالب هایی هستند که موارد پیش فرض در آنها رعایت گردیده و شما مطمئن خواید بود که سایت شما با مرورگرهای مختلف سازگاری کامل دارد. برخی از این فریم ورک ها به وصورت کامل طراحی شده اند و می توانید با تغییرات کوچکی در آن قالب مورد نظر خود را پیاده سازی نمایید. در زیر چند نمونه را برای شما آورده ام:
سورس:طراحی سایت دارکوب sitedesign.joomir.com
برای مشاهده لینک نیاز به ثبت نام دارید؛ برای ثبت نام کلیک کنید
طراحی ریسپانسیو امروزه بسیار گسترش پیدا کرده که به دلیل استفاده بسیار و در حال افزایش کاربران از موبایل و تبلت برای رویت وب سایت می باشد. طبق
برای مشاهده لینک نیاز به ثبت نام دارید؛ برای ثبت نام کلیک کنید
در سال 2012 55% از کاربران در سال 2012 از موبایل برای مرور وب استفاده می کرده اند و 31 درصد از کاربران اذعان داشتند که وسیله پیش فرض مرور وبشان موبایل می باشد. پس در صورتی که در مورد طراحی وب سایت ریسپانسیو سوالی دارید ادامه دهید.[h=2]طراحی ریسپانسیو چیست؟[/h]قبل از همه باید بدانید وب سایت ریسپانسیو و یا واکنش گرا چیست. وب سایت واکنش گرا وب سایتی است که خود را سازگار با سایز صفحه نمایش کاربر می سازد. به دلیل استفاده بسیار از تبلت و مرورگرهای موبایل برای مرور وب طراحان وب مجبور شدند سایت را به گونه ای طراحی نمایند که در صفحه کوچک موبایل به خوبی نمایش داده شود. به همین دلیل از media queries استفاده شد تا سایر دستگاه کاربر را مشخص نماید و از تصاویر و صفحه بندی انعطاف پذیر در سایزهای مختلف استفاده شد.[h=2]طراحی ریسپانسیو به معنی سایت نسخه موبایل نیست[/h]برای برخی سایت ها به صورت جداگانه نسخه ای برای موبایل طراحی می گردد و زمانی که کاربر با موبایل سایت را مشاهده می نماید به آدرس دیگری هدایت می شود که نسخه مخصوص موبایل وب سایت می باشد. ولی در طراحی ریسپانسیو کاربر سایت را در همان آدرس و با ترکیب مناسب موبایل مشاهده می نماید و کاربر به آدرس دیگری ارجاع داده نمی شود. که بر طبق
برای مشاهده لینک نیاز به ثبت نام دارید؛ برای ثبت نام کلیک کنید
طراحی ریسپانسیو بهترین نوع برای ایجاد نسخه سازگار با موبایل وب سایت است.[h=2]جعبه های شناور[/h]جعبه ها و یا باکس های شناور به پیاده سازی سایت ریسپانسیو کمک می نماید. به این صورت که صفحه به ستون های مختلف شناوری تقسیم می گردد و زمانی که عرض صفحه کوچک شده ستون ها بر روی هم حرکت می نمایند و کاربر کافی است در صفحه اسکرول عمودی نماید تا کلیه مطالب را مطالع نماید. المان هایی از صفحه که در حالت عادی عرض بیشتری دارند با توجه به تغییر عرض صفحه تغییر سایز می کنند تا در عرض مورد نظر بدون نیاز به اسکرول افقی یه خوبی نمایش داده شوند.[h=2]تصاویر و فونت ها نیز می بایست ریسپانسیو باشند[/h]استفاده از تصاویر در سایت ریسپانسیو به خودی خود آنها را ریسپانسیو نمی نماید. توسط برخی از کتابخانه ها نظیر
برای مشاهده لینک نیاز به ثبت نام دارید؛ برای ثبت نام کلیک کنید
می توان این کار را به صورت اتوماتیک انجام داد. برای فونت ها نیز می توان از rems به جای px استفاده نمود. با تعیین سایز فونت صفحه به صد درصدhtml {font-size: 100%;}می توانید از استفاده نمایید تا سایز فونت ها را مطابق با عرض صفحه تعیین نماید.@media (max-width: 640px) {body {font-size: 1.2rem} } @media (max-width: 1100px) {body {font-size: 1.5rem} }
[h=2]استفاده از فریم ورک ها همه چیز را ساده می سازد[/h]در دنیای ریسپانسیو فریم ورک هایی وجود دارند که با استفاده از آنها می توانید لایه بندی و قالب سایت خود را طراحی نماید. در حقیقت قالب هایی هستند که موارد پیش فرض در آنها رعایت گردیده و شما مطمئن خواید بود که سایت شما با مرورگرهای مختلف سازگاری کامل دارد. برخی از این فریم ورک ها به وصورت کامل طراحی شده اند و می توانید با تغییرات کوچکی در آن قالب مورد نظر خود را پیاده سازی نمایید. در زیر چند نمونه را برای شما آورده ام:
-
برای مشاهده لینک نیاز به ثبت نام دارید؛ برای ثبت نام کلیک کنید
-
برای مشاهده لینک نیاز به ثبت نام دارید؛ برای ثبت نام کلیک کنید
-
برای مشاهده لینک نیاز به ثبت نام دارید؛ برای ثبت نام کلیک کنید
برای مشاهده لینک نیاز به ثبت نام دارید؛ برای ثبت نام کلیک کنید
با دارکوب تماس حاصل فرمایید.سورس:طراحی سایت دارکوب sitedesign.joomir.com
برای مشاهده لینک نیاز به ثبت نام دارید؛ برای ثبت نام کلیک کنید