آموزش طراحی ریسپانسیو به زبان ساده

[بویکا 124]

با سلام ! دوباره با یک مطلب آموزشی دیگه در خدمت شما هستیم ! امروزه اکثر قالب ها به صورت ریسپانسیو طراحی میشن . ریسپانسیو یعنی چی ؟؟ یعنی واکنشگرا ! اون یعنی چی ؟؟؟ یعنی استایل قالب تو گوشی های موبایل و تبلت و PC متفاوت باشه تا قالب هنگام کوچیک شدن به هم نریزه .

روش های زیادی وجود داره ولی من می خوام ساده ترین روش رو آموزش بدم . به عنوان مثال شما 3 تا div کنار هم دارین که این 3 تا کنار هم تمام صفحه رو اشغال می کنن . حالا ما می خوایم مثلا وقتی که رزولیشن کمتر از 500 پیکسل بود div ها برن زیر هم و هر div کل بلوکش رو بگیره !

نکته مهمی که وجود داره اینه که شما تو استایل اصلی باید طول عنصر ( width ) رو حتما با % تنظیم کنین نه پیکسل . مثلا اگه 3 تا div تو یه ردیف تمام بلوک رو گرفتن به هر کدوم 30% عرض بدین نه 300px .

نکته بعدی فایل استایل خودتون رو باز کنین و کد زیر رو توش تست کنین :

@media screen and (max-width: 480px) and (min-width: 10px) {

}

به ما از تگ media screen استفاده می کنیم . تو کد بالا گفتیم اگه اندازه صفحه بیشتر از 10 پیکسل و کمتر از 480 پیکسل باشه این استایل رو اجرا کن . مثلا

@media screen and (max-width: 480px) and (min-width: 10px) {

.test{

width:100% !important;

}

}

در کد بالا ما میگیم که عرض عنصر test رو در رزولیشن های بالا 100 درصد کن . یعنی تو هر بلوک 1 عنصر قرار بگیره . دستور !important هم برای اینه که این دستور حتما اعمال بشه . اگه نخواین از important استفاده کنین از تگ مدیا در انتهای تمام کدهای استایل استفاده کنین ! به همین راحتی .

برای تست درست بودن کدهای از افزونه firefox استفاده کنین و صفحه رو باز کنین ! سپس دکمه های ctrl+shift+m رو بزنین و تو رزولیشن های متفاوت تست کنین . به مثال کاربردی آنلاین زیر توجه کنین !

مثال آنلاین

در مثال بالا ما 3 تا استایل متفاوت برای 3 رزولیشن متفاوت انتخاب کردیم . روزلیشن کمتر 767 پیکسل ، مابین 768 و 800 پیکسل و بالای 800

سوالی بود در خدمتم !!! راستی مثال بالا رو با فایرفاکس باز کرده دکمه هایی رو که گفتم رو بزنین تا ببنین ریسپانسیو هست یا نه .

مثال بالا رو می تونین از پایین دانلود کنین .

media-responsive-aseman.zip