PDA

View Full Version : سوال: حل مشکل به هم ریختگی منو



ma.andishe
سه شنبه 15 فروردین 1396, 09:04 صبح
سلام

من سایتی رو طراحی کرده بودم که ریسپانسیو نبود

حالا تصمیم به ریسپانسیو کردن ان با بوت استرپ کردم

مشکل اینجاست که من منوها رو سمت سرور بعد از تشخیص سطح دسترسی توسط یه استرینگ بیلدر میسازم و به یه لیترال که توی مستر پیج اصلی هستش نسبت میدم .

حالا بهم ریختگی منو دارم. و از اونجا که میخوام با کمترین تغییرات بتونم سایت رو ریسپانسیو کنم .از دوستان خواهشمندم راهنمایی بفرمایید

از دوستان عزیزی که تجربه بیشتری تو این کار دارن درصورت راهنمایی لطفا روش کا رو کامل توضیح بفرمایید

با تشکر

Mag-Mag
سه شنبه 15 فروردین 1396, 09:46 صبح
سلام
یک راه حل اینه که با استفاده از دستور
@media


چینش دلخواهت رو برای سایز گوشی ها و تبلت ها بسازی
مثلا ایننطوری

@media(max-width: 980px) {
.Menu li {
width:200px;
background-color:red;
}
}
@media(max-width: 640px) {
.Menu li {
width:200px;
background-color:red;
}
}

مثلا دستور اولی میگه
برای اسکرین هایی که سایزشون حداکثر 980 پیکسل هست ، بیا منو ها رو سایزشون رو بکن 200 و بک گروندشون رو هم قرمز
دومی میگه برای اسکرین هایی که سایزشون حداکثر 640 پیکسل هست بیا ...

مسلما اگر کسی با گوشی موبایل سایت رو باز کنه
دستور دوم براش اجرا میشه
چون حداکثر سایز اسکرینش به 640 نمیرسه

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

نکتش فقط اینه که حواستون باید به ، اولویت اجرای دستورات css باشه
یعنی با id به المان های منو ، خاصیتی نداده باشی

و این کدهایی که بهت دادم رو در انتهای کد های css بنویسی

مسلما خود بوت استرپ ، کلاس های استانداری برای منو داره ، که خودشون ریسپانسیو هستند
این راه حل برای اینه که نخوای ساختار منو رو بر اساس کلاس های موجود در بوت استرپ بنویسی