رفتن به مطلب

سوال در مورد رسپانسیو و نسخه موبایل


m1410

پست های پیشنهاد شده

با سلام و خسته نباشید

دوستان میخواستم بدونم میشه کاری کرد که بعضی جاهای سایت در گوشی به نمایش در نیاد ؟

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

درود .

بله شما می تونید به راحتی با استفاده از media@ در استایل قالبتون ، نحوه نمایش هر DIV و عناصر دیگه ای که می خواهید رو در اندازه های مختلف صفحه نمایش دستگاه کاربر ، تغییر بدید.

 

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

@media screen and (max-width:320px){
 .custom-class {display: none;}
}

@media screen and (max-width:480px){
 .custom-class {display: none;}
}

@media screen and (max-width:520px){
 .custom-class {display: none;}
}

@media screen and (max-width:640px){
 .custom-class {display: none;}
}

در کد استایل بالا ، ما 4 اندازه صفحه نمایشی تعریف کردیم و برای هر کدام یک استایل داخلش گذاشتیم. کلس مثال ما custom-class هست که باید جایگزین class یا ID مورد نظرتون بشه .

البته ما در بالا به صورت فرضی تعریف کردیم که در اندازه های تعیین شده ، عنصر ما با کلس custom-class مخفی بشه . اما شما می تونید در هر اندازه ، استایل های دیگه ای رو هم تعریف کنید که در هر اندازه از صفحه نمایش ، عنصر مورد نظرتون با اندازه ، رنگ و ... مختلفی نمایش داده بشه .

 

اما به طور کلی پاسخ شما به این صورت هست که :

  1. ابتدا باید با استفاده از media یک اندازه مشخص کنیم (این کدها باید در یکی از فایل های css که در سایت خروجی گرفته میشه وارد بشه. برای اینکار می تونید از فایل استایل اصلی قالب استفاده کنید)
  2. سپس برای class مورد نظرمون از display با مقدار none استفاده کنیم تا در اون اندازه مشخص ، اون عنصر به طور کلی مخفی بشه . (مانند مثال کد بالا)

موفق باشید.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

بایگانی شده

این موضوع بایگانی و قفل شده و دیگر امکان ارسال پاسخ نیست.

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...