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 بندی مشکل دارم... میخوام یه چیز اصولی پیاده کنم
واقعا ممنون میشم کمکم کنید🙏
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
در کدی که قرار دادید از مدیا کوئری ها استفاده شده
مثلا این گزینه رو در نظر بگیرید:
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}اگر طول صفحه مرورگر حداقل ۹۹۲ پیکسل باشه
طول مجاز برای Container شما میشه ۹۶۰ پیکسل
به این ترتیب ۳۲ پیکسل فضای خالی باقی میمونه
که ۱۶ پیکسل در یک سمت Container و ۱۶ پیکسل در سمت دیگر Container قرار میگیره
و باعث میشه Container بصورت افقی در مرکز قرار بگیره
برای بقیه مدیا کوئری ها هم همینه
کلیتش این میشه که: در اندازه های مختلف ِ عرض صفحه، ما نمی خوایم از کل عرض صفحه استفاده کنیم، بلکه میخوایم از سمت چپ و سمت راست کمی فاصله داشته باشه اون بخش. نمیخوایم به کناره های عرض عناصر مون بچسبه، میخوایم همواره مقداری فاصله داشته باشیم از کناره ها.
ملاک انتخاب این سایز چیه؟ مثلا بوت استرپ نقطه شکستش روی 576px،768px،992px،1200px هست؟
ولی خب بعضیا میان اینا رو تغییر میدن ... آیا رو منطق خاصی باید تغییر داد؟
اگ خیلی بزرگ جلوه اش میدم چون متاسفانه یا خوشبختانه من رو کدم یخورده زیادی حساسم🙂
ملاکش دو چیز هستش: یکی دستگاه های مختلف هستش، اندازه هایی که دستگاه های مختلف دارند این نقاط شکست رو مشخص میکنه. و ملاک دوم هم خود طراحی شما هستش، ممکنه نیاز باشه که نقاط شکست بیشتری داشته باشید، یا بالعکس نقاط شکست کمتری.
شما می تونید بوت استرپ رو الگو قرار بدین و از اندازه ها و نقاط شکستش استفاده کنید.
از طرف دیگه، ممکنه ابعاد بوت استرپ رو نپسندید، مثلا بخواید در ابعاد 1200، 900 و 600 پیکسلی نقاط شکست رو بوجود بیارید و با سه نقطه شکست، کدنویسی تون رو صورت بدین.
بوت استرپ برای گوشی ها نقطه شکست رو 576px در نظر گرفته.
برای تبلت در حالت عمودی 768px و در حالت افقی 992px.
برای رایانه ها و لپ تاپ ها هم نقطه شکست رو 1200px در نظر گرفته.
مسئله ی مهم اینه که در نهایت طرح شما، باید در همه ی اندازه ها به درستی به نمایش در بیادش. حالا چه با 4 نقطه شکست، چه با 3 تا و چه با 5، 6 و ...
البته اگر نقاط شکست رو زیاد کنید، کدنویسی تون احتمالا بیشتر میشه. همین 3 یا 4 یا 5 تا کافیه.