Percentages and Viewport Units

Percentages and Viewport Units

CSS లో percentage (%) మరియు viewport units responsive layouts కోసం ఉపయోగిస్తాము. వీటి సహాయంతో screen size లేదా parent element size మారినప్పుడు elements కూడా సరైన విధంగా మారుతాయి.

Percentage (%) అంటే ఏమిటి?

Percentage value సాధారణంగా parent element యొక్క size ఆధారంగా లెక్కించబడుతుంది. ఉదాహరణకు, ఒక card కి width: 70%; ఇస్తే, అది తన parent container యొక్క width లో 70% స్థలాన్ని తీసుకుంటుంది.

Parent element width 1000px అయితే, 70% width సుమారు 700px అవుతుంది. Parent width మారితే card width కూడా మారుతుంది.

Viewport Units అంటే ఏమిటి?

Viewport అంటే browser window లో కనిపించే screen భాగం. Viewport units screen size ఆధారంగా పనిచేస్తాయి.

• vw అంటే viewport width లో 1 శాతం.
• vh అంటే viewport height లో 1 శాతం.
• vmin అంటే viewport width లేదా height లో చిన్నదాని ఆధారం.
• vmax అంటే viewport width లేదా height లో పెద్దదాని ఆధారం.

ఉదాహరణకు, 50vw అంటే viewport width లో 50%. 40vh అంటే viewport height లో 40%.

ఎప్పుడు ఉపయోగించాలి?

• Parent size కి అనుగుణంగా element మారాలి అంటే percentages ఉపయోగించండి.
• Browser screen width కి అనుగుణంగా text లేదా section మారాలి అంటే vw ఉపయోగించండి.
• Screen height కి అనుగుణంగా hero section లేదా panel ఉండాలి అంటే vh ఉపయోగించండి.

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Percentages and Viewport Units</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #eef4ff;
    }

    .hero {
      min-height: 50vh;
      padding: 5vh 5%;
      background-color: #174ea6;
      color: white;
      text-align: center;
    }

    .hero h1 {
      font-size: 6vw;
      margin: 0 0 2vh;
    }

    .card {
      width: 70%;
      margin: 4vh auto;
      padding: 3%;
      background-color: white;
      color: #222222;
      border-radius: 12px;
      text-align: center;
    }
  </style>
</head>
<body>
  <section class="hero">
    <h1>Responsive CSS</h1>
    <p>This section uses viewport units.</p>
  </section>

  <article class="card">
    <h2>Percentage Width</h2>
    <p>This card uses 70% of its parent width.</p>
  </article>
</body>
</html>

ఈ ఉదాహరణలో hero section తన height కోసం vh, heading size కోసం vw, card width కోసం percentage ఉపయోగిస్తుంది.

Simple Explanation

Percentage parent element size కి relative గా పనిచేస్తుంది. Parent చిన్నదైతే child కూడా చిన్నదవుతుంది.

vw browser viewport width ఆధారంగా ఉంటుంది. vh browser viewport height ఆధారంగా ఉంటుంది.

ఉదాహరణకు, width: 50%; అంటే parent width లో సగం. font-size: 5vw; అంటే viewport width లో 5% ఆధారంగా text size. min-height: 60vh; అంటే element కనీసం viewport height లో 60% ఎత్తు కలిగి ఉంటుంది.

Browser window ని పెద్దది లేదా చిన్నది చేసి page ని పరీక్షిస్తే ఈ units ప్రభావం స్పష్టంగా కనిపిస్తుంది.

Real-Life Example

ఒక theatre screen ని ఊహించండి. Screen width మారినప్పుడు దానిపై ఉన్న advertisement కూడా అందుబాటులో ఉన్న స్థలానికి అనుగుణంగా మారాలి. Advertisement container కి width: 80%; ఇస్తే అది screen లో 80% స్థలాన్ని తీసుకుంటుంది. ఒక welcome section కనీసం screen height లో ఎక్కువ భాగం కనిపించాలి అంటే min-height: 70vh; ఉపయోగించవచ్చు.

Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Percentages and Viewport Units</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #eef4ff;
    }

    .hero {
      min-height: 50vh;
      padding: 5vh 5%;
      background-color: #174ea6;
      color: white;
      text-align: center;
    }

    .hero h1 {
      font-size: 6vw;
      margin: 0 0 2vh;
    }

    .card {
      width: 70%;
      margin: 4vh auto;
      padding: 3%;
      background-color: white;
      color: #222222;
      border-radius: 12px;
      text-align: center;
    }
  </style>
</head>
<body>
  <section class="hero">
    <h1>Responsive CSS</h1>
    <p>This section uses viewport units.</p>
  </section>

  <article class="card">
    <h2>Percentage Width</h2>
    <p>This card uses 70% of its parent width.</p>
  </article>
</body>
</html>

Browser లో నీలం రంగు hero section కనిపిస్తుంది. అది viewport height లో కనీసం 50% ఎత్తు కలిగి ఉంటుంది. Heading screen width కి అనుగుణంగా మారే పెద్ద పరిమాణంలో కనిపిస్తుంది. దాని కింద తెల్లని card parent width లో 70% వెడల్పుతో మధ్యలో కనిపిస్తుంది.

Line-by-Line Explanation

Try It

Try this CSS code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Try Percentages and Viewport Units</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #f2f6ff;
    }

    .banner {
      min-height: 40vh;
      padding: 4vh 5%;
      background-color: #2457a6;
      color: white;
      text-align: center;
    }

    .banner h1 {
      font-size: 5vw;
    }

    .box {
      width: 80%;
      margin: 5vh auto;
      padding: 4%;
      background-color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <section class="banner">
    <h1>Try Responsive Units</h1>
    <p>Resize the browser window and observe the changes.</p>
  </section>

  <div class="box">
    <h2>Flexible Box</h2>
    <p>This box is 80% wide.</p>
  </div>
</body>
</html>

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• Percentage (%) సాధారణంగా parent element size ఆధారంగా పనిచేస్తుంది.
• vw viewport width లో ఒక శాతాన్ని సూచిస్తుంది.
• vh viewport height లో ఒక శాతాన్ని సూచిస్తుంది.
• Parent size మారితే percentage-based element size కూడా మారుతుంది.
• Viewport units responsive layouts, hero sections మరియు flexible text sizing కోసం ఉపయోగపడతాయి.
• Browser window ని resize చేసి percentage, vw మరియు vh ప్రభావాన్ని పరీక్షించండి.