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

کلمه ی responsive به معنای واکنش گراست. یعنی مثلاً قالب سایتی که شما میسازید در نمایشگر های مختلف از خودش واکنش نشون بده و در هر نمایشگری مثلاً عرضش به صورت خودکار به اندازه ی اون نمایشگر در بیاد.

در ریسپانسیو درست نمایش دادن مطرح هست. اینکه قالب مثلاً سایت شما در همه ی نمایشگر ها مثل مبایل و تبلت و نمایشگر های بزرگ و متوسط درست نمایش داده بشه.

چون نمایشگر گوشی های مبایل کوچکتر هست برای همین  ظاهر قالب سایت شما امکانش زیاده  که در دیگر نمایشگر ها متفاوت باشه.

معمولاً برای اینکه سرعت کار ما در برنامه نویسی بیشتر بشه ما از فریم ورک های css مثل بوت استرپ استفاده میکنیم که همین بوت استرپ از مدیا کوئری ساخته شده.

من فایل بوت استرپ رو خودم شخصی سازی کردم و از بین همه ی دستوراتش فقط از col استفاده میکنم. حجم نسخه ای که من ازش استفاده میکردم 160 کیلوبایت بود که من وقتی شخصی سازیش کردم 10 کیلوبایت شد.

استفاده از دستوراتی مثل container و row به نظرم لزومی نداره. حتی برخی مواقع کار آدم را سخت تر میکنه.

شما می توانید یک عنصری مثل <main> برای کل قالب تعریف کنید و بهش با درصد عرض بدید. حالا  اگر میخواید در نمایشگر های کوچکتر عرضش بزرگتر یا کوچکتر بشه از مدیا کوئری استفاده کنید.

برای تصویر هم می توانید به این صورت عمل کنید:

.aks{

display:block;

max-width:100%;

height:auto;

}

در ساخت قالب ممکن است نیاز باشد کدهای بالا را تغییر هم بدهید.

فایل بوت استرپ شخصی سازی شده را اینجا دانلود کنید.

منبع این  مطلب : http://barnamenevisi.blogsky.com