How to get current screen width in CSS?

Question

Use the CSS3 Viewport-percentage feature.

Viewport-Percentage Explanation

Assuming you want the body width size to be a ratio of the browser’s view port. I added a border so you can see the body resize as you change your browser width or height. I used a ratio of 90% of the view-port size.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Styles</title>

    <style>
        @media screen and (min-width: 480px) {
            body {
                background-color: skyblue;
                width: 90vw;
                height: 90vh;
                border: groove black;
            }

            div#main {
                font-size: 3vw;
            }
        }
    </style>

</head>
<body>
    <div id="main">
        Viewport-Percentage Test
    </div>
</body>
</html>

Leave a Comment Cancel reply