Responsive design and Font Units in CSS

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="CSS/Responsive_Design_Font_Units.css">
    <title>Responsive Design and Font Units</title>
</head>

<body>
    Endless new resolutions and devices are difficult to support separately for a web developer.
    Responsive design is a way for a web developer to make his website adapt to all the devices and
    resolutions.
    Responsive design is a necessity and not a luxury anymore!

    Various ways to achieve responsive design:
    1. Setting up the viewport
    2. Use max-width/max-height
    3. Using CSS Media Queries
    4. Using rem/vh/vw units over pixels

    <div class="container">
        <h1 id="first">This is first heading</h1>
        <h1 id="second">This is second heading</h1>
        <h1 id="third">This is third heading</h1>
    </div>
</body>

</html>




Below File is CSS/Responsive_Design_Font_Units.css File.
html {
    font-size: 25px;
}

.container {
    width: 400px;
    /* height: 344px; */

    /* 100vh means Complete Whole */
    height: 100vh;
    width: 100vw;
    font-size: 10px;
    border: 2px solid #ff0000;
}

h1 {
    text-align: center;
}

#first {
    /* size will increase multiple of parent(Here, container)
    Here font-size: 10px * 5em = 50px will be calculated */
    /* font-size: 3em;
    padding: 3em; */
}

#second {
    /* When we want to font-size which depends on parent then we can use "em" */
    /* font-size: 3rem;
    padding: 3rem; */
}






Comments

Post a Comment