How to use Viewport In CSS

Q: How to use Viewport In CSS

We can use viewport units to set font sizes relative to the viewport size. This ensures that font sizes adjust according to the size of the viewport, making them responsive.

Using Media Queries

We can use viewport units to set font sizes relative to the viewport size. This ensures that font sizes adjust according to the size of the viewport, making them responsive.

Syntax:

.class_name {
    font-size: 4vw; 
}

Example: The below code will explain the use of the viewport units to make CSS font size fit container effectively.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>GFG</title>
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
    <style>
        .responsive-text {
            font-size: 4vw;
            text-align: center;
            border: 2px solid black;
        }
    </style>
</head>

<body>
    <div class="container">
        <p class="responsive-text">
            w3wiki is a leading platform that provides 
            computer science resources and coding challenges 
            for programmers and technology enthusiasts, along 
            with interview and exam preparations for upcoming 
            aspirants. With a strong emphasis on enhancing coding 
            skills and knowledge, it has become a trusted destination 
            for over 12 million plus registered users worldwide. The 
            platform offers a vast collection of tutorials, practice 
            problems, interview tutorials, articles, and courses, covering 
            various domains of computer science.
        </p>
        <p class="responsive-text">
            Our exceptional mentors hailing from top 
              colleges & organizations have the ability 
              to guide you on a journey from the humble beginnings 
            of coding to the pinnacle of expertise. 
              Under their guidance watch your skills flourish 
              as we lay the foundation and help you conquer the 
            world of coding.
        </p>
        <p class="responsive-text">
            Our brand is built on the pillars of expertise, 
              accessibility, and community. We strive to 
              empower individuals to enhance their programming 
            skills, to bridge the gap between academia and 
              industry, and provide a supportive community to 
              the learners. w3wiki is committed to promoting 
            technological advancement and providing opportunities 
              for growth in the ever-evolving field of computer science.
        </p>
    </div>
</body>

</html>

Output:

How to make CSS Font Size Fit Container Effectively ?

Making CSS font size fit a container effectively involves ensuring that the text scales appropriately based on the dimensions of the container. This is crucial for maintaining readability and a consistent user experience regardless of the device being used.