قالب رسپانسیو چطوری کار میکنه؟

[[younes]]

سلام دوستان
میخوام بدونم چه طور یک سایت که قالبش مال 10 سال پیشه رو بروز کنم؟
یعنی دقیقا چطور میشه یک قالب رسپانسیو طراحی کنم؟ (همش با css است یا js هم نیازه؟)

[پیام حیاتی]

از ابتدا طراحی کنید ، از فریمورک بوت استرپ استفاده کنید.

[peymanpyq]

برای طراحی قالب ریسپانسیو یه سری پرس و جو از اندازه عرض صفحه مرورگر گرفته می شه و بعد بر اساس اون میان اندازه اجزا صفحه رو مشخص می کنن

با استفاده از css به این صورت:



@media (min-width: 544px) {
.container {
max-width: 576px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 940px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}

مثلا داخل کد بالا اومد اندازه کلاس container رو بر اساس اندازه مرورگر تعیین کرده
اطلاعات بیشتر
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp


یه راه آسون ترش استفاده از ابزار آماده مثل بوتسرتپه ولی اگه به هر دلیلی نمی خواین از کل بوتسرپ استفاده کنین می تونید از کتابخونه های سبک تر استفاده کنید
مثلا
http://designinstruct.com/web-design/responsive-css-grid

یا فقط قسمت گرید bootstrap رو دانلود و استفاده کنید