How to get current screen width in CSS?

Question

I use the following CSS code for formatting when screen width is less than 480px, and it works well.

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

I would like to get the current width for calculation to use zoom like it follows:

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
        zoom: (current screen width)/(480);
    }
}

score 77 · Answer 1 · edited Mar 16 '18 at 13:58

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>

Use "Full page" to see the zoom effect. – Heather92065 Feb 19 '16 at 21:40 — Heather92065, Feb 19 '16 at 21:40

score 22 · Answer 2 · answered Jun 23 '21 at 05:37

22

Just as we have the css unit "view-height(vh)", which roughly corresponds to the height of the viewport, you can also use view-width(vw) to dynamically resize your element with respect to the width of the viewport

i.e


.random-div{
    height: 100vh;
    width: calc(100vw - 480px);
}

cheers

answered Jun 23 '21 at 05:37

Adépòjù Olúwáségun

3,297
1
18
27

You just taught me how to use calc() in css! – Shourya Shikhar Dec 27 '22 at 18:22

score 8 · Answer 3 · answered Oct 12 '20 at 04:11

8

this can be achieved with the css calc() operator

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
        zoom:calc(100% / 480);
    }
}

answered Oct 12 '20 at 04:11

Suthura Sudharaka

643
10
25

score 0 · Answer 4 · edited Mar 15 '21 at 08:34

Based on your requirement I think you want to put dynamic fields in CSS file, however that is not possible as CSS is a static language. However you can simulate the behaviour by using Angular.

Please refer to the below example. I'm here showing only one component.

login.component.html

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
    
    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css']
    })
    export class LoginComponent implements OnInit {
    
      cssProperty:any;
      constructor(private sanitizer: DomSanitizer) { 
        console.log(window.innerWidth);
        console.log(window.innerHeight);
        this.cssProperty = 'position:fixed;top:' + Math.floor(window.innerHeight/3.5) + 'px;left:' + Math.floor(window.innerWidth/3) + 'px;';
        this.cssProperty = this.sanitizer.bypassSecurityTrustStyle(this.cssProperty);
      }
    
    ngOnInit() {
    
      }
    
    }

login.component.ts

<div class="home">
    <div class="container" [style]="cssProperty">
        <div class="card">
            <div class="card-header">Login</div>
            <div class="card-body">Please login</div>
            <div class="card-footer">Login</div>
        </div>
    </div>
</div>

login.component.css

.card {
    max-width: 400px;
}
.card .card-body {
    min-height: 150px;
}
.home {
    background-color: rgba(171, 172, 173, 0.575);
}

How to get current screen width in CSS?

4 Answers4

Linked