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

User · Answer

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.

_x000D_

<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
<head>_x000D_
    <title>Styles</title>_x000D_
_x000D_
    <style>_x000D_
        @media screen and (min-width: 480px) {_x000D_
            body {_x000D_
                background-color: skyblue;_x000D_
                width: 90vw;_x000D_
                height: 90vh;_x000D_
                border: groove black;_x000D_
            }_x000D_
_x000D_
            div#main {_x000D_
                font-size: 3vw;_x000D_
            }_x000D_
        }_x000D_
    </style>_x000D_
_x000D_
</head>_x000D_
<body>_x000D_
    <div id="main">_x000D_
        Viewport-Percentage Test_x000D_
    </div>_x000D_
</body>_x000D_
</html>

_x000D_

User · Answer

Based on your requirement i think you are wanted 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   lt div class  home  gt       lt div class  container   style   cssProperty  gt           lt div class  card  gt               lt div class  card-header  gt Login lt  div gt               lt div class  card-body  gt Please login lt  div gt               lt div class  card-footer  gt Login lt  div gt           lt  div gt       lt  div gt   lt  div gt    login component css   card       max-width  400px     card  card-body       min-height  150px     home       background-color  rgba 171  172  173  0 575

User · Answer

this can be achieved with the css calc   operator  media screen and  min-width  480px        body           background-color  lightgreen          zoom calc 100    480

[html] How to get current screen width in CSS?

Examples related to html

Examples related to css