Responsive
ریسپانسیو چیست؟

ریسپانسیو چیست؟
ریسپانسیو در لغت واکنش گرا معنی شده است و در فضای مجازی قابلیت انعطاف پذیری طراحی سایت های اینترنتی می باشد .به گونه ای که صفحات وب سایت نسبت به دستگاه کاربر چون گوشی تلفن هوشمند ، تبلت ، لب تاپ ، انواع مانیتور کامپیوتر و تلویزیون های هوشمند واکنش نشان داده و خود را بر مبنای اندازه صفحه و اسکرین نمایش می دهند.
اگر با موبایل و یا تبلت وب سایتی را باز کردید و برای خواندن یا دیدن تصاویر مدام نیاز به اسکرول يا تغيير زوم داشتید ، و این برای شما آزار دهنده است ، بدانید که طراح سایت از قابلیت ریسپانسیو استفاده نکرده است.
برای تست رسپانسیو بودن سایت می توانید مرورگر خود را ازحالت maximize خارج کنید و با موس خود صفحه مرورگر را کوچک و بزرگ کنید ، می بینید که سایز صفحه تغییر می کند اما نوشته ها و لینک ها همچنان خوانا هستند و نیازی به zoom in و zoom out و اسکرول ندارند.
همچنین می توانید گوشی یا تبلت خود را در حالت افقی یا عمودی گرفته و نتیجه را مشاهده نمایید.
یک ریسپانسیو صحیح ، شامل متن ها ، تصاویر ، تصایر متحرک ، جداول و حتی ویدئو ها می باشد.و از به هم ریختگی المان های مختلف در یک صفحه ی وب جلوگیری می کند.
در زیر لینک دو نمونه سایت ریسپانسیو جهت مشاهده آورده شده است.
سایت کانون بازنشستگان آموزش و پرورش نجف آباد.
www.kanoonb.ir
سایت تفریحی آموزشی حبیب.
www.habib.ir

کد ریسپانسیو کردن صفحات وبسایت:
کد ریسپانسیو کردن تصاویر:
کد ریسپانسیو کردن دایو ها DIV :
ریسپانسیو کردن جدول ها :
ریسپانسیو کردن آی فرم IFRAME :
ریسپانسیو فرم ها :

برای ریسپانسیو صفحه کد زیر در قسمت هد قرار می گیرد.
		
<meta name="viewport" content="width=device-width, initial-scale=1.0">

کد زیر ریسپانسیو تصاویر که در استایل نوشته می شود

img {max-width: 100%;  height: auto;}

ریسپانسیو دایو سه ستونی

* { box-sizing: border-box;}

/* Create three equal columns that floats next to each other */
.column {direction: rtl;
  font: 16px IRANSansWeb,tahoma; font-weight:bold ;
  float: right;
  width: 33.33%;
  padding: 10px;
  height: auto; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

ریسپانسیو جدول

.vms-responsive{
    overflow-x:auto !important;
}

یا

<table>

…

</table>

</div>

سی اس اس آن
.table-container{width: 100%; overflow-y: auto; _overflow: auto; margin: 0 0 1em;}

راه حل دیگر

.table-container::-webkit-scrollbar{ -webkit-appearance: none; width: 14px; height: 14px;}

.table-container::-webkit-scrollbar-thumb{border-radius: 8px; border: 3px solid #fff;  background-color: rgba(0, 0, 0, .3);}

ریسپانسیو آی فرم
	
	
<iframe src="http://habib.ir" style="height:90%;width:90%;" scrolling="no" frameborder="0"></iframe>

ریسپانسیو فرم کامنت

textarea {
    width: 100%;
    height: 260px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 16px;
    resize: none;
}

Responsive ریسپانسیو چیست؟

Responsive
ریسپانسیو چیست؟