منظور از حداقل و حداکثر طول و عرض در CSS چیست؟ منظور از max width و min width چیست ؟ چگونه می‌توانیم از max height استفاده کنیم؟ چرا باید از min height استفاده کنیم؟ در این مقاله می‌خواهیم در رابطه با حداقل ها و حداکثر ها در طول و عرض CSS صحبت کنیم.
سرفصل‌های پست
مفهوم Max Width
بحث max-width، بحث ساده و جالبیه، و کاربرد اون، شبیه به کاربرد واحد درصد در خاصیت های width و height هست.
هرگاه ما به عنصری دارای نحوه نمایش بلاک، خاصیت width رو اعمال کنیم، اون رو از پوشوندن تمام خطی که در اون حضور داره، منع میکنیم و کنترل عرض اون رو در دست می‌گیریم.
نکته: برای آشنایی بیشتر با مفهوم نحوه نمایش بلاک، می‌تونین مقاله مقدار block در CSS میزفا رو مطالعه کنین.
اما یه مشکل در این بین به وجود میاد. اون هم در حالت ریسپانسیو یا واکنش گرا بودن صفحه وب ماست.
وقتی صفحه رو کوچیک میکنیم، عرض خود صفحه کاهش پیدا می‌کنه، اما عرض عنصر مورد نظر ما خیر.
برای مثال به کد زیر توجه کنین:
به کد زیر توجه کنین:
کد HTML:
<div>Mizfa max-width tutorial</div>
کد CSS:
div{
width:700px;
}
حالا بیاید نتیجه کد رو هم تو تبلت با عرض ۲۰۰۰ پیکسل، و هم تو گوشی با عرض ۶۰۰ پیکسل مشاهده کنیم:
همونطور که میبینیم، عنصر مورد نظر ما تو صفحه موبایل خودش رو به راحتی نشون نمیده و به اصطلاحی، واکنش گرا نیست و یا به اصطلاح تخصصی تر، ریسپانسیو نیست!
چرا که به مرورگر گفته شده تحت هیچ شرایطی عرض عنصر موردنظر رو از ۷۰۰ پیکسل کمتر نکن.
اما حالا بیاید به جای width، از خاصیت max-width استفاده کنیم.
div{
max-width: 700px;
}
نتیجه به شکل زیر خواهد بود:
همونطور که میبینیم، عرض عنصر مورد نظر ما کاهش پیدا می‌کنه، چرا که عرض ۷۰۰ پیکسل، فقط یک “حداکثر عرض” به حساب میاد، و نه عرض همیشگی عنصر.
مفهوم min-width
این مفهوم، بر عکس مفهوم max-width عمل می‌کنه.
به عبارت ساده تر، min-width زمانی به کار می‌ره که نمی‌خوایم عرض عنصر، در صورت کوچیک شدن صفحه، از یک مقدار خاص کمتر بشه.
این خاصیت رو عموما همراه با خاصیت width استفاده میکنیم.
به کد زیر توجه کنین:
div{
width: 50%;
min-width: 200px;
}
توسط کد بالا، عرض عنصر div رو نصف یا پنجاه درصد صفحه وب سایت قرار می‌دیم.
این عرض ۵۰٪، تا زمانی صادقه که عرض عنصر ما به ۲۰۰ پیکسل برسه.
بعد از رسیدن عرض به ۲۰۰ پیکسل، عرض عنصر تغییری نمی‌کنه و در مرز ۲۰۰ پیکسل ثابت خواهد موند.
تو مثال زیر، کد فوق رو به صورت زنده مشاهده کنین. رو نماد codepen کلیک کنین و بعد از وارد شدن به سایت، عرض صفحه آزمایش رو کوچیک کنین تا تغییرات عرض عنصر div رو ببینین:
dark
اگه مثالی رو متوجه نشدین، حتما سوالتون رو تو قسمت نظرات پایگاه دانش میزفا بیان کنین، من کمکتون می‌کنم 🙂
مفاهیم max-height و min-height
این دو خاصیت، کاملا مشابه max-width و min-height عمل می‌کنن. با این تفاوت که حوزه تاثیرگذاری اون ها، در ارتفاع عناصر خواهد بود، و نه در عرض عناصر.
خاصیت max-height:
این خاصیت، بیشترین ارتفاع ممکن برای یک عنصر رو مشخص می‌کنه. به کد زیر توجه کنین:
div{
max-height: 700px;
}
کد بالا، بیان می‌کنه که در بزرگ ترین حالت صفحه، عنصر دارای ارتفاع ۷۰۰ پیکسل باشه و در صورتی که ارتفاع کمتر از ۷۰۰ پیکسل شد، عنصر مورد نظر هم دچار کاهش ارتفاع شه.
خاصیت min-width:
این خاصیت، کمترین ارتفاع ممکن برای یک عنصر رو مشخص می‌کنه. به کد زیر توجه کنین:
div{
min-height: 200px;
}
کد فوق بیان می‌داره، در حالت طبیعی ارتفاع عنصر رو auto تصور کن. اما در صورتی که ارتفاع صفحه شروع به کم شدن کرد، ارتفاع عنصر از ۲۰۰ پیکسل کمتر نشه.
پایان ترم
[box type=”info” class=”question-from-users” width=””]سوال:
تو کد زیر، یک دکمه رو میبینیم که داخل یک عنصر div جا گرفته.
با کوچیک کردن صفحه، استایل دکمه بهم میخوره.
داخل مکان مشخص شده، چه کدی بنویسیم که از بهم خوردن استایل دکمه جلوگیری کنه؟
dark
نکته: نگران دستوراتی که نمیشناسین نباشین، برای پاسخ دادن به این سوال، به هیچ چیزی جز آموخته های این مقاله نیاز ندارین 🙂
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
تو این مقاله، با مفهوم max-width و min-width آشنا شدیم و دیدیم که چطور میتونیم با کمک این دو خاصیت، عرض بیشینه و کمینه ای برای عناصرمون در نظر بگیریم.
امیدوارم این آموزش جامع css براتون مفید بوده باشه. اگر سوالی، مشکلی، نکته، پیشنهاد، انتقادی و حتی درد و دلی داشتید، خیلی خیلی خوشحال میشیم که در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنید.
مدیر محتوا: علی اسمعیلی
23 پاسخ
سلام ممنون بابت اموزش ها
به min و max میشه مقدار درصدی داد؟
اگر اره، پس با height و width عادی چه فرقی داره؟
سلام خواهش میکنیم 🙂
میشه کار های متفاوتی انجام داد. بستگی به نیازمون داره. من خودم شخصا ندیدم جایی بخوان از درصد داخل max و min استفاده کنن.
اما یه نمونه اماده کردم از width بر حسب درصد و max-width بر حسب پیکسل که یک کاربرد جالب از ترکیب این دو رو نشون میده، تو این نمونه، بدون استفاده از مدیا کوئری، میتونیم عرض 1200پیکسل رو به عنصرمون بدیم و در حالت موبایل، اون رو با عرض 90% صفحه داشته باشیم.
میتونی اینجا[tag]https://codepen.io/mizfa/pen/oNyzZLb[/tag] مطالعش کنی
/* — استایل مورد نظرتو اینجا بنویس — */
div.container{
min-width:200px
}
/* — ————————— — */
/* — استایل دکمه — */
button{
background-color:rgb(0,200,255);
color:white;
padding:10px 30px;
font-size: 1.5em;
border:none;
border-radius: 10px;
/* — استایل کانتینر — */
div.container{
display:flex;
justify-content:center;
align-items:center;
background-color: rgb(240,240,240);
width:30%;
height:500px;
border-style:solid;
border-color:blue;
}
}
Click on me!
عالی، ممنون ازتون
با سلام و تشکر از آموزش مفید و مفرحتون توضیحات واقعا عالی بود و به نظر من با دادن مقدار
min-width:200px دکمه به درستی نمایش داده میشه
سلام، خواهش میکنیم.
پاسختون کاملا درسته. تشکر از شما 🙂
سلام
ممنونم عالی بود
سلام زهرا. خوشحالیم که برات مفید بوده?
سلام
جواب سوال:
سلام حسين، ممنون ازت پاسخت درسته?
سلام خسته نباشید
چطور میتونم ارتفاع یک عنصر رو به اندازه صفحه نمایشگر هر سیستمی تغییر بدم بگونه ای که با هر دستگاهی که باز بشه اندازه ارتفاع به اندازه ارتفاع صفحه باشه و بطور کامل کل عنصر در صفحه نمایشگر دیده بشه آیا باید از .max min استفاده کرد؟
سلام رضا
میتونی به body یک ارتقاع ۱۰۰ درصد بدی و بعد یک اون بکگراند که داخل یک مثلا div گذاشتی هم میتونی همینو بدی.
html, body { height: 100%; margin: 0; } div { height: 100%; background: yellow; }اطلاعات بیشتر در مقاله Background در CSS هست.
سلام و خسته نباشید خداقوت
اگر دقت کرده باشید اون button اسکرول عمودی میخوره،باید max-height بدین تا اسکرولش برطرف شه ، و width آن با واحد %مشخص شده یعنی اندازه همون صفحه نمایشت میشه.
شایدم من درست توجه نکردمه ولی وقتی بهشmax-heightدادم درست شد چون اسکرولش عمودی بود حالا شما یک نگاه بندازید،شاید من اشتباه کنم.
/* — استایل کانتینر — */
div.container{
display:flex;
justify-content:center;
align-items:center;
background-color: rgb(240,240,240);
width:30%;
height:500px;
min-width: 200px
}
button{
background-color:rgb(0,200,255);
color:white;
padding:10px 30px;
font-size: 1.5em;
border:none;
border-radius: 0px;
}
مرسی مهدی جان. کاملا درسته 🙂
با عرض سلام و خسته نباشید
سایتی که لینکش رو براتون ارسال کردم وردپرس هست
اما چون موقعیتی که میخواستم رو نداشت به صورت دستی یک موقعیت ایجاد کردم و استایل دادم
اما تو بعضی از سیستم ها ایراد داره. مثل عکسی که ارسال شده.
ظاهرا مشکل در کد های استایله.ممنون میشم راهنمای بفرمائید.
کدهایی که در فایل php گذاشتم
کدهای css
.headertopright{
float:right
min-width:23%
max-width:100%
background: #f0f0f0 !important
}
.headertopleft{
float:left
min-width:77%
max-width:100%
}
سلام خداداد
نمیشه اینطوری مشکل رو فهمید. باید به یکی دسترسی بدی تا بتونه بررسی کنه
با سلام
یوزر و پس خدمت شما ( بکاپ گرفتم )
***
اگه ممکنه طوری باشه که من هم متوجه اشتباهاتم بشم.
ممنونم
ما چنین کارهایی رو در پروژه هامون چه در غیرپروژه ها انجام نمیدیم، لطفا به شخص دیگه بسپارید. مثلا میتونید به سایت پونیشا سر بزنید.
پس برای چی گفتین؟؟؟!!!!
” نمیشه اینطوری مشکل رو فهمید. باید به یکی دسترسی بدی تا بتونه بررسی کنه”
خداداد عزیز منظور از به کسی بسپارید، ما نبودیم. به دنبال متخصص باشید که این کار رو براتون انجام بده. موفق باشید.
راه های مختلفی برای حل این مشکل هستش ساده ترینش میتونه min-width:120px; دادن به کانتینر باشه .
و یا میتونیم flexx-grow:1;به دکممون بدیم .
موفق باشید
سلام. در مورد استفاده از خاصیت min-width، درست میگی اما با مقدار 120 پیکسل، هنوز شاهد زیر هم رفتن کلمات داخل دکمه هستیم
مقدار 200 پیکسل میتونه بهتر عمل کنه 🙂