آموزش ریسپانسو

در این پست از سایت دیزاینر ، قصد داریم به شما آموزش بدیم که چطور میتونید قالبی که ساختید رو با ترفندی از CSS با نام Media Queries ، ریسپانسیو یا واکنش گرا کنید. مزیت این کار اینه که سایت شما در دستگاه های دیگری که امکان وب گردی رو دارن ، زیبا و خوانا باشه. و این کار نیاز به کدنویسی داره که در این پست ، این کار رو با هم مرور میکنیم. فقط توجه داشته باشید که کلاس ها و آی دی هایی که در این پست میبینید ، فرضی هستند.

آموزش ریسپانسیو کردن قالب با CSS
قدم اول : ساخت قالب

شما اول قالبتون رو بدون هیچگونه فکر کردن به ریسپانسیو کدنویسی کنید. فقط در نظر داشته باشید که برای بکگراند بلوک ها و پست ها از عکس استفاده نکنید. وقتی که قالب کاملا آماده شد ، ریسپانسیو کردن شروع میشه.
قدم دوم : ساخت یک فایل CSS جدید

حالا با استفاده از یک ادیتور مثل Adobe Dreamweaver یا Microsoft Expression Web 4 ، یک فایل CSS جدید ایجاد میکنیم ( نام مهم نیست ) سپس وارد مرحله اصلی میشیم. در این بخش ، شما باید برای هر اندازه یک استایل جداگانه با media query در فایل CSS خود بنویسید.
قدم سوم : نوشتن Media Queries

حالا نوبت به کار اصلی رسیده ، باید در اینجا با Media Query ، یه جور شرط در CSS بنویسیم. مثل نمونه :
@media screen and (max-width: 980px) {
۱

@media screen and (max-width: 980px) {

حالا به توضیح کد بالا میپردازیم. کد بالا استایل برای صفحاتی با طول کم تر از ۹۸۰px رو مشخص میکنه.

در واقع کد بالا به زبان ساده میشه : اگر طول صفحه کوچک تر از ۹۸۰ پیکسل بود ، این استایل ها را اعمال کن.

خب حالا باید استایل ها رو به شکل عادی بنویسیم مثل نمونه زیر :
@media screen and (max-width: 980px) { .wrapper { widh: 100%; } .top-menu { display: none; } }
۱
۲
۳
۴
۵
۶
۷
۸

@media screen and (max-width: 980px) {
.wrapper {
widh: 100%;
}
.top-menu {
display: none;
}
}

حالا باید برای اندازه های دیگری هم این کار رو انجام بدیم. ما به شما توصیه میکنیم که برای ۶۵۰px و ۴۸۰px هم این کار رو انجام بدید. فقط توجه داشته باشید که در این اندازه ها ، باید بخش های بلوک ها و پست ها ، قابلیت float ( شناور بودن ) خودشون رو از دست بدن و بلوک ها در زیر پست ها ظاهر بشن. برای این کار هم میتونید مثل حالت عادی استایل بنویسید. به نمونه دقت کنید :
@media screen and (max-width: 980px) { .wrapper { widh: 100%; } .top-menu { display: none; } } @media screen and (max-width: 650px) { .wrapper { widh: 100%; } .top-menu { display: none; } .block-wrapper { float: none; width: 95%; margin: auto; } .post-wrapper { float: none; width: 95%; margin: auto; } } @media screen and (max-width: 480px) { .wrapper { widh: 100%; } .top-menu { display: none; } .block-wrapper { float: none; width: 95%; margin: auto; } .post-wrapper { float: none; width: 95%; margin: auto; } .manager-message { display: none; } .menu-mini { display: block; } }
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰

@media screen and (max-width: 980px) {
.wrapper {
widh: 100%;
}
.top-menu {
display: none;
}
}
@media screen and (max-width: 650px) {
.wrapper {
widh: 100%;
}
.top-menu {
display: none;
}
.block-wrapper {
float: none;
width: 95%;
margin: auto;
}
.post-wrapper {
float: none;
width: 95%;
margin: auto;
}
}
@media screen and (max-width: 480px) {
.wrapper {
widh: 100%;
}
.top-menu {
display: none;
}
.block-wrapper {
float: none;
width: 95%;
margin: auto;
}
.post-wrapper {
float: none;
width: 95%;
margin: auto;
}
.manager-message {
display: none;
}
.menu-mini {
display: block;
}
}

البته تموم کلاس هایی که در کد بالا میبینید ، فرضی هستن مثل menu-mini ، manager-message و …
قدم چهارم : رفع مشکلات احتمالی

چون بعضی از تبلت ها و موبایل ها هنگام وبگردی ، در اندازه فونت ها و صفحه تغییر ایجاد میکنن ، باید این مشکلات رو رفع کرد.

برای کشیده نشدن صفحه در گوشی های iPhone از کد زیر استفاده کنید :
<meta name=”viewport” content=”width=device-width; initial-scale=1.0″>
۱

<meta name=”viewport” content=”width=device-width; initial-scale=1.0″>

و چون مرورگر Internet Explorer 8 از این روش برای ریسپانسیو سازی صفحه پشتیبانی نمیکنه ، کافیه کتاب خونه زیر رو به صفحه زیر اضافه کنید :
<!–[if it IE9]><script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script><![endif]–>
۱

<!–[if it IE9]><script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script><![endif]–>

قدم پنجم : پیوند دادن به استایل ها

با استفاده از تگ link در HTML و با قرار دادن خاصیت rel بر روی stylesheet و href بر روی آدرس فایل ، به فایل CSS در قالب پیوند دهید . مانند نمونه :
<link rel=”stlyesheet” href=”http://www.designr.ir”>
۱

<link rel=”stlyesheet” href=”http://www.designr.ir”>

موفق باشید .