احسانم
5 سال پیش توسط احسانم مطرح شد
5 پاسخ

layout بندی

سلام دوستان
من یه مشکلی پیدا کردم توی انتخاب سایز واسه ی container وبسایت ... برای مثلا بوت استرپ یه سری سایز و به صورت استاندارد تعیین کرده ولی خب خیلیا این سایزا رو تغییر میدن،دلیل و منطق این تغییر چیه؟

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

سایزایی که انتخاب میکنن بر چه اساسه؟!مثلا خود راکت هم همین کار رو کرده
متاسفانه من یکی دو روزه دور خودم میچرخمو به نتیجه ای نرسیدم ...
در کل من با layout بندی مشکل دارم... میخوام یه چیز اصولی پیاده کنم
واقعا ممنون میشم کمکم کنید🙏


ثبت پرسش جدید
علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 5 سال پیش مطرح شد
2

در کدی که قرار دادید از مدیا کوئری ها استفاده شده
مثلا این گزینه رو در نظر بگیرید:

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

اگر طول صفحه مرورگر حداقل ۹۹۲ پیکسل باشه
طول مجاز برای Container شما میشه ۹۶۰ پیکسل
به این ترتیب ۳۲ پیکسل فضای خالی باقی میمونه
که ۱۶ پیکسل در یک سمت Container و ۱۶ پیکسل در سمت دیگر Container قرار میگیره
و باعث میشه Container بصورت افقی در مرکز قرار بگیره

برای بقیه مدیا کوئری ها هم همینه


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش مطرح شد
1

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


احسانم
تخصص : توسعه دهنده وب
@iehsan 5 سال پیش مطرح شد
0

ملاک انتخاب این سایز چیه؟ مثلا بوت استرپ نقطه شکستش روی 576px،768px،992px،1200px هست؟
ولی خب بعضیا میان اینا رو تغییر میدن ... آیا رو منطق خاصی باید تغییر داد؟
اگ خیلی بزرگ جلوه اش میدم چون متاسفانه یا خوشبختانه من رو کدم یخورده زیادی حساسم🙂


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش مطرح شد
1

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

شما می تونید بوت استرپ رو الگو قرار بدین و از اندازه ها و نقاط شکستش استفاده کنید.

از طرف دیگه، ممکنه ابعاد بوت استرپ رو نپسندید، مثلا بخواید در ابعاد 1200، 900 و 600 پیکسلی نقاط شکست رو بوجود بیارید و با سه نقطه شکست، کدنویسی تون رو صورت بدین.


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش آپدیت شد
1

بوت استرپ برای گوشی ها نقطه شکست رو 576px در نظر گرفته.
برای تبلت در حالت عمودی 768px و در حالت افقی 992px.
برای رایانه ها و لپ تاپ ها هم نقطه شکست رو 1200px در نظر گرفته.

مسئله ی مهم اینه که در نهایت طرح شما، باید در همه ی اندازه ها به درستی به نمایش در بیادش. حالا چه با 4 نقطه شکست، چه با 3 تا و چه با 5، 6 و ...
البته اگر نقاط شکست رو زیاد کنید، کدنویسی تون احتمالا بیشتر میشه. همین 3 یا 4 یا 5 تا کافیه.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام