Pixels, em and rem
Pixels, em మరియు rem
CSSలో text size, spacing, width వంటి వాటిని నిర్ణయించడానికి units ఉపయోగిస్తాం. ఈ lessonలో ఎక్కువగా ఉపయోగించే మూడు units అయిన px, em మరియు rem గురించి నేర్చుకుందాం.
1. px అంటే ఏమిటి?
px అంటే pixel. ఇది ఒక fixed unit. ఉదాహరణకు font-size: 20px; అని రాస్తే text size 20 pixelsగా ఉంటుంది. Parent element లేదా root font size మారినా సాధారణంగా px value మారదు.
2. em అంటే ఏమిటి?
em అనేది relative unit. ఇది సాధారణంగా ఆ element యొక్క parent font size ఆధారంగా లెక్కించబడుతుంది. Parent font size 16px అయితే 1em అంటే 16px, 1.5em అంటే 24px అవుతుంది.
emను nested elementsలో ఉపయోగించినప్పుడు sizes ఒకదానిపై ఒకటి ఆధారపడవచ్చు. అందువల్ల ఎక్కువ nesting ఉన్నప్పుడు జాగ్రత్తగా ఉపయోగించాలి.
3. rem అంటే ఏమిటి?
rem అంటే root em. ఇది document యొక్క root element అయిన <html> font size ఆధారంగా లెక్కించబడుతుంది. సాధారణ browser default root font size 16pxగా ఉంటుంది. కాబట్టి 1rem సాధారణంగా 16px, 2rem సాధారణంగా 32px అవుతుంది.
px, em, rem మధ్య తేడా
- px: fixed size కావాల్సినప్పుడు ఉపయోగించండి.
- em: parent element size ఆధారంగా size లేదా spacing మార్చాలనుకున్నప్పుడు ఉపయోగించండి.
- rem: మొత్తం pageలో consistent మరియు scalable sizes కావాల్సినప్పుడు ఉపయోగించండి.
Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Units</title>
<style>
html {
font-size: 16px;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
font-size: 2rem;
}
.card {
font-size: 20px;
padding: 1em;
border: 2px solid #2563eb;
}
.card p {
font-size: 1em;
margin: 0;
}
</style>
</head>
<body>
<h1>Unit Demo</h1>
<div class="card">
<p>This card uses px and em units.</p>
</div>
</body>
</html>ఈ exampleలో h1 కోసం 2rem వాడాం. Root size 16px కాబట్టి అది సాధారణంగా 32px అవుతుంది. .cardలో font size 20px ఉంది. కాబట్టి దాని padding: 1em సాధారణంగా 20pxగా లెక్కించబడుతుంది. Paragraphకు 1em ఇవ్వడంతో అది card యొక్క font sizeను అనుసరిస్తుంది.
Browserలో test చేయడం
- Complete HTML codeను browser-based HTML editorలో paste చేయండి.
- Run లేదా Preview నొక్కండి.
2remను1.5remగా మార్చి heading sizeను గమనించండి.padding: 1emను2emగా మార్చి card spacing ఎలా పెరుగుతుందో చూడండి.
Simple Explanation
px ఒక fixed measurement. em parent లేదా current element font sizeకు సంబంధించి మారుతుంది. rem మాత్రం root <html> element font sizeను ఆధారంగా తీసుకుంటుంది.
ఒక చిన్న నియమంగా గుర్తుంచుకోండి: fixed size కోసం px, local scaling కోసం em, page-wide consistent scaling కోసం rem ఉపయోగించవచ్చు.
Real-Life Example
ఒక పుస్తకంలోని ప్రధాన శీర్షికను ఊహించండి. అన్ని పేజీలలో ఒకే basic scaleను అనుసరించాలంటే rem ఉపయోగించడం సులభం. ఒక cardలోని text sizeకు అనుగుణంగా దాని padding కూడా మారాలని అనుకుంటే em ఉపయోగించవచ్చు. ఒక చిన్న border thicknessను ఖచ్చితంగా ఉంచాలంటే px అనుకూలంగా ఉంటుంది.
Code Examples
px, em మరియు rem ను ఒకే పేజీలో ఉపయోగించడం
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Units</title>
<style>
html {
font-size: 16px;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
font-size: 2rem;
}
.card {
font-size: 20px;
padding: 1em;
border: 2px solid #2563eb;
}
.card p {
font-size: 1em;
margin: 0;
}
</style>
</head>
<body>
<h1>Unit Demo</h1>
<div class="card">
<p>This card uses px and em units.</p>
</div>
</body>
</html>html selectorలో root font size 16pxగా ఉంచాం. Headingకు 2rem ఇచ్చాం. Cardకు 20px font size ఇచ్చినందువల్ల దాని 1em padding సాధారణంగా 20px అవుతుంది. Paragraphలోని 1em card యొక్క font sizeను అనుసరిస్తుంది.
పేజీలో Unit Demo అనే పెద్ద heading కనిపిస్తుంది. దాని కింద blue border ఉన్న card కనిపిస్తుంది. Cardలో This card uses px and em units. అనే text ఉంటుంది. Heading సుమారు 32pxగా, card text 20pxగా కనిపిస్తుంది.
Line-by-Line Explanation
<html> elementను select చేస్తుంది. ఇది root element కాబట్టి rem calculationsకు ఇది ఆధారం.
Root font sizeను 16pxగా set చేస్తుంది. అందువల్ల
1rem సాధారణంగా 16px అవుతుంది.
పేజీలోని
<h1> headingకు styles వర్తింపజేస్తుంది.
Heading size root font sizeకు రెండింతలు అవుతుంది. Root size 16px అయితే 2rem సుమారు 32px.
card class ఉన్న
<div> elementను select చేస్తుంది.
Cardలోని textకు 20px fixed font size ఇస్తుంది. ఇది px unit యొక్క ఉదాహరణ.
Card paddingను card యొక్క font size ఆధారంగా set చేస్తుంది. Card font size 20px కాబట్టి 1em సాధారణంగా 20px అవుతుంది.
cardలో ఉన్న
<p> elementను select చేస్తుంది.
Paragraph font sizeను parent card యొక్క font sizeకు సమానంగా ఉంచుతుంది. అందువల్ల ఇది సుమారు 20pxగా కనిపిస్తుంది.
Browserలో Unit Demo అనే headingను చూపిస్తుంది. దీనికి h1 CSS rule వర్తిస్తుంది.
card class ఉన్న containerను సృష్టిస్తుంది. దీనికి .card selectorలోని px మరియు em styles వర్తిస్తాయి.
Cardలో కనిపించే paragraph text ఇది. దీనికి .card p selectorలోని 1em font size వర్తిస్తుంది.
Try It
Try this CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Try CSS Units</title>
<style>
html {
font-size: 16px;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
}
h1 {
font-size: 2rem;
}
.box {
font-size: 18px;
padding: 1em;
border: 2px solid #15803d;
}
</style>
</head>
<body>
<h1>Try the Units</h1>
<div class="box">Change the rem or em values and run again.</div>
</body>
</html>Practice
Practice: practice_codeలో h1 headingను 2remగా మార్చండి. తరువాత .cardలో font sizeను 20pxగా మరియు paddingను 1.5emగా మార్చండి. Browserలో card size మరియు spacingను గమనించండి.
Hint: Heading కోసం rem, card text కోసం px, card spacing కోసం em ఉపయోగించండి.
Common Mistakes
font-size: 20; అని unit లేకుండా రాయడం.ఇది సాధారణంగా సరైన declaration కాదు.
font-size: 20px; లేదా అవసరాన్ని బట్టి 1.25rem వంటి unitతో రాయండి.
em ఎప్పుడూ root font size ఆధారంగా పనిచేస్తుందని అనుకోవడం.em parent లేదా current element font sizeకు సంబంధించినది. Root ఆధారంగా predictable scaling కావాలంటే rem ఉపయోగించండి.
em values ఉపయోగించి text size ఊహించినదానికంటే చాలా పెద్దదిగా చేయడం.Parent font sizesను పరిశీలించండి. Consistent page-wide sizing కోసం
rem ఉపయోగించడం సులభం.
rem value మారితే parent element font size మారుతుందని అనుకోవడం.rem root <html> font sizeను ఆధారంగా తీసుకుంటుంది; parent font sizeను కాదు.
Interview Questions
CSSలో px అంటే ఏమిటి?
Answer: px అంటే pixel. ఇది fixed unit. ఉదాహరణకు 16px ఒక నిర్దిష్ట pixel sizeను సూచిస్తుంది.
em మరియు rem మధ్య ప్రధాన తేడా ఏమిటి?
Answer: em సాధారణంగా parent లేదా current element font sizeను ఆధారంగా తీసుకుంటుంది. rem మాత్రం root <html> element font sizeను ఆధారంగా తీసుకుంటుంది.
2rem సాధారణంగా ఎన్ని pixels అవుతుంది?
Answer: Root font size 16pxగా ఉంటే 2rem సాధారణంగా 32px అవుతుంది. Root font size మార్చితే result కూడా మారుతుంది.
Spacing కోసం em ఎప్పుడు ఉపయోగించవచ్చు?
Answer: ఒక componentలోని spacing ఆ component text sizeకు అనుగుణంగా మారాలని అనుకున్నప్పుడు em ఉపయోగించవచ్చు.
Exam Questions
Fixed CSS unit ఏది: px, em లేదా rem?
Answer:
px fixed CSS unit.
Root element ఆధారంగా పనిచేసే unit ఏది?
Answer:
rem unit root <html> element font size ఆధారంగా పనిచేస్తుంది.
Parent font size 20px అయితే 1em సాధారణంగా ఎంత?
Answer:
సాధారణంగా 1em = 20px.
Root font size 16px అయితే 1.5rem ఎంత?
Answer:
1.5rem = 24px.
Quick Revision
- px ఒక fixed unit.
- em parent లేదా current element font sizeకు relativeగా మారుతుంది.
- rem root html element font sizeకు relativeగా మారుతుంది.
- Root font size 16px అయితే 1rem సాధారణంగా 16px.
- Consistent page-wide sizing కోసం rem, component-relative spacing కోసం em ఉపయోగించవచ్చు.
- CSS declarationలో unitను మర్చిపోవద్దు: 20px, 1em లేదా 2rem.