Min-width, Max-width, Min-height and Max-height
Min-width, Max-width, Min-height మరియు Max-height
CSSలో width మరియు height ఒక element యొక్క సాధారణ పరిమాణాన్ని నిర్ణయిస్తాయి. కానీ responsive designలో element చాలా చిన్నదిగా లేదా చాలా పెద్దదిగా మారకుండా నియంత్రించాలి. అందుకోసం min-width, max-width, min-height మరియు max-height properties ఉపయోగిస్తాము.
ఈ properties ఎలా పనిచేస్తాయి?
- min-width: element యొక్క కనీస వెడల్పును నిర్ణయిస్తుంది. Element దీని కంటే చిన్నదిగా మారదు.
- max-width: element యొక్క గరిష్ఠ వెడల్పును నిర్ణయిస్తుంది. Element దీని కంటే వెడల్పుగా మారదు.
- min-height: element యొక్క కనీస ఎత్తును నిర్ణయిస్తుంది. Content తక్కువగా ఉన్నా element ఈ ఎత్తు కంటే చిన్నది కాదు.
- max-height: element యొక్క గరిష్ఠ ఎత్తును నిర్ణయిస్తుంది. Element ఈ ఎత్తు కంటే ఎక్కువగా పెరగదు.
ఎప్పుడు ఉపయోగించాలి?
Responsive pagesలో cards, articles, forms మరియు content sections కోసం ఇవి చాలా ఉపయోగకరంగా ఉంటాయి. ఉదాహరణకు, desktopలో card చాలా వెడల్పుగా కనిపించకుండా max-width వాడవచ్చు. Mobileలో card చాలా సన్నగా మారకుండా min-width వాడవచ్చు.
సాధారణ నియమం
ఒక elementకు width మరియు min-width రెండూ ఉంటే, width min-width కంటే తక్కువగా ఉండదు. అలాగే width max-width కంటే ఎక్కువగా ఉండదు. Height properties కూడా ఇదే విధంగా పనిచేస్తాయి.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Size Limits</title>
<style>
.card {
width: 80%;
min-width: 240px;
max-width: 520px;
height: 120px;
min-height: 180px;
max-height: 220px;
padding: 20px;
border: 3px solid #2563eb;
background-color: #eff6ff;
}
</style>
</head>
<body>
<section class="card">
<h1>Flexible Card</h1>
<p>This card has minimum and maximum size limits.</p>
</section>
</body>
</html>Simple Explanation
min అంటే కనీస పరిమితి, max అంటే గరిష్ఠ పరిమితి.
ఉదాహరణకు, width: 80%; వల్ల card screen widthలో 80% తీసుకుంటుంది. కానీ min-width: 240px; వల్ల అది 240px కంటే చిన్నది కాదు. max-width: 520px; వల్ల అది 520px కంటే పెద్దది కాదు.
అదే విధంగా height: 120px; ఉన్నా min-height: 180px; వల్ల card content area కనీసం 180px ఎత్తు ఉంటుంది. max-height: 220px; గరిష్ఠ పరిమితిని నిర్ణయిస్తుంది.
ఈ properties responsive layoutsలో contentను readableగా మరియు layoutను నియంత్రణలో ఉంచడానికి సహాయపడతాయి.
Real-Life Example
ఒక visiting cardను ఊహించండి. అది ఒక చిన్న mobile screenలో చాలా సన్నగా కనిపించకూడదు. అలాగే పెద్ద desktop screenలో చాలా వెడల్పుగా కనిపించకూడదు. అందువల్ల cardకు min-width మరియు max-width పెడతాము. Cardలో content తక్కువగా ఉన్నా ఒక నిర్దిష్ట ఎత్తు ఉండాలి అంటే min-height వాడతాము.
Code Examples
Cardకు కనీసం మరియు గరిష్ఠ పరిమాణం ఇవ్వడం
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Size Limits</title>
<style>
.card {
width: 80%;
min-width: 240px;
max-width: 520px;
height: 120px;
min-height: 180px;
max-height: 220px;
padding: 20px;
border: 3px solid #2563eb;
background-color: #eff6ff;
}
</style>
</head>
<body>
<section class="card">
<h1>Flexible Card</h1>
<p>This card has minimum and maximum size limits.</p>
</section>
</body>
</html>ఈ exampleలో card యొక్క width screen ప్రకారం మారుతుంది. కానీ అది 240px కంటే చిన్నది కాదు మరియు 520px కంటే పెద్దది కాదు. Heightకు 120px ఇచ్చినా, min-height: 180px; కారణంగా card కనీసం 180px content heightను కలిగి ఉంటుంది. max-height: 220px; గరిష్ఠ content heightను నియంత్రిస్తుంది.
Browserలో లేత నీలం background మరియు నీలం border ఉన్న Flexible Card కనిపిస్తుంది. Card width viewportపై ఆధారపడి మారుతుంది, కానీ 240px కంటే చిన్నది కాదు మరియు 520px కంటే పెద్దది కాదు. Card content height కనీసం 180px ఉంటుంది.
Line-by-Line Explanation
ఈ selector class=”card” ఉన్న HTML elementను ఎంచుకుంటుంది. తరువాతి CSS declarations ఆ cardకు వర్తిస్తాయి.
Card తన parent widthలో 80% తీసుకోవడానికి ప్రయత్నిస్తుంది. ఇది screen size మారినప్పుడు cardను flexibleగా ఉంచుతుంది.
Card width 240px కంటే చిన్నదిగా మారదు. చిన్న screenలో కూడా cardకు కనీస వెడల్పు ఉంటుంది.
Card width 520px కంటే ఎక్కువగా పెరగదు. పెద్ద screenలో card చాలా వెడల్పుగా మారకుండా ఇది సహాయపడుతుంది.
Cardకు సాధారణ height 120pxగా సూచించబడింది. అయితే min-height value ఎక్కువగా ఉండటం వల్ల browser min-heightకు ప్రాధాన్యం ఇస్తుంది.
Card content area కనీసం 180px ఎత్తు ఉండేలా చేస్తుంది. అందువల్ల height 120px కంటే min-height 180px వర్తిస్తుంది.
Card content area 220px కంటే ఎక్కువ ఎత్తుకు పెరగకుండా గరిష్ఠ పరిమితిని ఇస్తుంది.
Cardలోని text చుట్టూ 20px అంతర్గత ఖాళీని ఇస్తుంది. ఇది size limit కాకపోయినా contentను borderకు అంటకుండా ఉంచుతుంది.
Card చుట్టూ 3px solid blue borderను చూపిస్తుంది.
Card backgroundకు లేత నీలం రంగును ఇస్తుంది.
ఈ HTML elementకు card class ఉంది. అందువల్ల .card selectorలోని అన్ని CSS rules దీనికి వర్తిస్తాయి.
Cardలో ప్రధాన headingను చూపిస్తుంది.
Try It
Try this CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Size Limits Practice</title>
<style>
.box {
width: 90%;
min-width: 200px;
max-width: 450px;
min-height: 150px;
max-height: 250px;
padding: 16px;
border: 2px solid #15803d;
background-color: #f0fdf4;
}
</style>
</head>
<body>
<div class="box">
<h2>Responsive Box</h2>
<p>Resize the browser window and observe the size limits.</p>
</div>
</body>
</html>Practice
Practice: పై practice_codeలో .product-cardకు min-width: 240px;, max-width: 480px;, min-height: 160px; మరియు max-height: 240px; declarations చేర్చండి. తరువాత browser windowను resize చేసి మార్పును గమనించండి.
Hint: ఈ నాలుగు propertiesను .product-card ruleలో width మరియు padding దగ్గర చేర్చండి. min value కనీస పరిమాణాన్ని, max value గరిష్ఠ పరిమాణాన్ని నియంత్రిస్తుంది.
Common Mistakes
సరైన CSS property పేరు min-width. Hyphen తప్పనిసరిగా ఉండాలి.
0 కాకుండా ఇతర length valuesకు unit ఇవ్వాలి. ఉదాహరణకు max-width: 500px; అని రాయండి.
Content చదవడానికి సౌకర్యంగా ఉండేందుకు అవసరమైన max-width value ఇవ్వండి.
min-height ఎక్కువగా ఉంటే browser elementను ఆ కనీస height కంటే చిన్నదిగా చేయదు.
Content max-height కంటే ఎక్కువైతే అది బయటకు రావచ్చు లేదా కనిపించే విధానం layoutపై ఆధారపడి ఉంటుంది. అవసరమైన max-height valueను జాగ్రత్తగా ఎంచుకోండి.
Interview Questions
min-width అంటే ఏమిటి?
Answer: min-width elementకు కనీస widthను నిర్ణయిస్తుంది. Element ఆ value కంటే చిన్నదిగా మారదు.
max-width ఎందుకు ఉపయోగిస్తారు?
Answer: Element చాలా వెడల్పుగా మారకుండా నియంత్రించడానికి max-width ఉపయోగిస్తారు. ఇది readable layouts మరియు responsive designలో సహాయపడుతుంది.
width: 80%; మరియు max-width: 500px; రెండూ ఉంటే ఏమవుతుంది?
Answer: Element parent widthలో 80% తీసుకోవడానికి ప్రయత్నిస్తుంది. కానీ ఆ result 500px కంటే ఎక్కువైతే width 500px వద్ద ఆగుతుంది.
min-height మరియు height మధ్య తేడా ఏమిటి?
Answer: height సాధారణ లేదా సూచించిన ఎత్తును ఇస్తుంది. min-height మాత్రం element ఎత్తు కనీస పరిమితి కంటే తగ్గకుండా చూస్తుంది.
Exam Questions
క్రింది CSSలో box యొక్క width 700px అవుతుందా? .box { width: 80%; max-width: 600px; }
Answer:
కాదు. width 80% result 600px కంటే ఎక్కువైతే max-width కారణంగా box width 600px వద్ద పరిమితం అవుతుంది.
min-height property యొక్క ఉపయోగం ఏమిటి?
Answer:
Content తక్కువగా ఉన్నా elementకు కనీస height ఉండేలా min-height ఉపయోగిస్తారు.
కనీసం 250px width మరియు గరిష్ఠంగా 700px width కోసం CSS declarations రాయండి.
Answer:
min-width: 250px; మరియు max-width: 700px; అని రాయాలి.
Quick Revision
- min-width element యొక్క కనీస వెడల్పును నిర్ణయిస్తుంది.
- max-width element యొక్క గరిష్ఠ వెడల్పును నిర్ణయిస్తుంది.
- min-height element యొక్క కనీస ఎత్తును నిర్ణయిస్తుంది.
- max-height element యొక్క గరిష్ఠ ఎత్తును నిర్ణయిస్తుంది.
- Responsive layoutsలో element చాలా చిన్నదిగా లేదా చాలా పెద్దదిగా మారకుండా ఈ properties ఉపయోగిస్తాము.
- width లేదా heightతో పాటు min మరియు max limits ఇచ్చినప్పుడు browser ఆ పరిమితులను పాటిస్తుంది.