آموزش ریسپانسیو کردن قالب [قسمت دوم]
سلام
خب در قسمت اول توضیحاتی دادم که منظور از responsive کردن چی هست و به چه دردی میخوره
در این تاپیک میخوام نحوه ریسپانسیو کردن قالب انجمن رو بهتون توضیح بدم البته ریسپانسیو کردن قالب انجمن به همین
راحتی هم نیست و از قالب های دیگه بیشتر وقت میبره چون قالب انجمن قسمت های مختلفی داره و نیاز به وقت بیشتر


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

1. ابتدا تگ زیر رو در قالب headerinclude قرار بدید :
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

2. سپس به مسیر زیر برید :
قالب ها و پوسته ها / پوسته ها / پوسته مورد نظر
بر روی گزینه افزودن قالب بندی کلیک کنید و قالب جدیدی اضافه کنید و نامش رو responsive.css بزارید و
سپس گزینه محتویات محتویات مرا بنویس را انتخاب کنید و قالب جدید رو ذخیره کنید .

به صورت کلی محتویات موجود در قالب جدید responsive.css باید به صورت ذیل باشه :
@media screen and (max-width: 980px) {


}

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

}

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

}

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

}

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

به عنوان مقال ما کد زیر رو انتخاب کردیم :
@media screen and (max-width: 980px) {


}

در کد بالا ، عدد 980 به معنای عرض نمایشگری است که قالب انجمن در آن لود می شود .
بین دو آکولاد ، کدهای css مربوط به عرض 980 قرار میگیره و عرض های دیگه هم به همین ترتیب هستند .

خب حالا اگر بخواهیم چک کنیم و ببینیم که کدام قسمت های قالب به طور مثال در عرض 980 باعث ایجاد ناهماهنگی در قالب میشن ، بهترین راه استفاده از
مرورگر فایرفاکس هست .
ابتدا مرورگر رو باز کنید و آدرس انجمنتون رو وارد کنید سپس دکمه های ترکیبی ctrl + shift + m رو فشار بدید .
حالا میبینید که قالب انجمن شما در پنجره ای خاص باز میشه به صورت زیر :
image

اگر از گزینه های بالای اون پنجره عرض مورد نظر را انتخاب کنید ، مشاهده خواهید کرد که کدام قسمت های قالب در اون عرض خاص باعث به هم ریختگی
قالب میشوند .
حالا برای تشخیص نام کلاس اون بخش هم میتونید از یکی دیگه از امکانات این مرورگر استفاده کنید و اون هم امکان Inspect Element هست .
برای انجام این کار روی بخش مورد نظر کلیک راست کرده و گزینه Inspect Element را انتخاب کنید ، در پنجره ظاهر شده میتونید کدهای اون قسمت
رو مشاهده کنید .
مثل تصویر زیر :

image

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

با تشکر
thanks
نویسنده :

X
پلاگین Thread Link - ریدایرکت کردن موضوع به لینک دلخواه
[plgname]Thread Link[/plgname] [plgversion]1.2[/plgversion] [plgmybb]1.6[/plgmybb] [plgprice ...
پلاگین 1.6
    دیدگاه های کاربران 2

    ارسال: 2
    لینک تصاویر از بین رفته است.

    پاسخ مسئول
    ارسال: 3
    با تشکر
    مشکل برطرف شد

    برای عضویت در کانال تلگرامی
    [همیار مای بی بی]
    کلیک کنید
    دریافت آخرین اخبار ، کدهای تخفیف و جوایز
    برای اطلاع از آخرین اخبار مای بی بی فارسی عضو کانال تلگرامی شوید :