بویکا 124 ارسال شده در بهمن 93 گزارش بازنشر ارسال شده در بهمن 93 با سلام ! دوباره با یک مطلب آموزشی دیگه در خدمت شما هستیم ! امروزه اکثر قالب ها به صورت ریسپانسیو طراحی میشن . ریسپانسیو یعنی چی ؟؟ یعنی واکنشگرا ! اون یعنی چی ؟؟؟ یعنی استایل قالب تو گوشی های موبایل و تبلت و 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 1 نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .