آموزش CSSآموزش طراحی سایت

جلسه ۲۲ – حداقل و حداکثر طول و عرض در CSS

آشنایی با Max Width و Min Height

منظور از حداقل و حداکثر طول و عرض در 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;
}

حالا بیاید نتیجه کد رو هم تو تبلت با عرض ۲۰۰۰ پیکسل، و هم تو گوشی با عرض ۶۰۰ پیکسل مشاهده کنیم:

نمونه استفاده نشده از max width
نمونه استفاده نشده از max width

همونطور که میبینیم، عنصر مورد نظر ما تو صفحه موبایل خودش رو به راحتی نشون نمیده و به اصطلاحی، واکنش گرا نیست و یا به اصطلاح تخصصی تر، ریسپانسیو نیست!

چرا که به مرورگر گفته شده تحت هیچ  شرایطی عرض عنصر موردنظر رو از ۷۰۰ پیکسل کمتر نکن.

اما حالا بیاید به جای width، از خاصیت max-width استفاده کنیم.

div{
   max-width: 700px;
}

نتیجه به شکل زیر خواهد بود:

نمونه استفاده درست از max width

همونطور که می‌بینیم، عرض عنصر مورد نظر ما کاهش پیدا می‌کنه، چرا که عرض ۷۰۰ پیکسل، فقط یک “حداکثر عرض” به حساب میاد، و نه عرض همیشگی عنصر.

مفهوم 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 تصور کن. اما در صورتی که ارتفاع صفحه شروع به کم شدن کرد، ارتفاع عنصر از ۲۰۰ پیکسل کمتر نشه.

پایان ترم

سوال:

تو کد زیر، یک دکمه رو می‌بینیم که داخل یک عنصر div جا گرفته.

با کوچیک کردن صفحه، استایل دکمه بهم می‌خوره.

داخل مکان مشخص شده،‌ چه کدی بنویسیم که از بهم خوردن استایل دکمه جلوگیری کنه؟

dark

نکته: نگران دستوراتی که نمیشناسین نباشین، برای پاسخ دادن به این سوال، به هیچ چیزی جز آموخته های این مقاله نیاز ندارین 🙂

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

تو این مقاله، با مفهوم max-width و min-width آشنا شدیم و دیدیم که چطور می‌تونیم با کمک این دو خاصیت، عرض بیشینه و کمینه ای برای عناصرمون در نظر بگیریم.

امیدوارم این آموزش جامع css براتون مفید بوده باشه. اگر سوالی، مشکلی، نکته، پیشنهاد، انتقادی و حتی درد و دلی داشتید، خیلی خیلی خوشحال میشیم که در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنید.

مدیر محتوا: علی اسمعیلی

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

‫2 نظر داریم، تو هم نظر بذار، پاسخ کامل میدیم :)

  1. راه های مختلفی برای حل این مشکل هستش ساده ترینش میتونه min-width:120px; دادن به کانتینر باشه .
    و یا میتونیم flexx-grow:1;به دکممون بدیم .
    موفق باشید

    1
    1. سلام. در مورد استفاده از خاصیت min-width، درست میگی اما با مقدار 120 پیکسل، هنوز شاهد زیر هم رفتن کلمات داخل دکمه هستیم
      مقدار 200 پیکسل میتونه بهتر عمل کنه 🙂

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


حداکثر حجم فایل برای آپلود: 1 مگابایت.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر