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

this can be achieved with the css calc   operator  media screen and  min-width  480px        body           background-color  lightgreen          zoom calc 100    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   x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D       lt title gt Styles lt  title gt  x000D   x000D       lt style gt  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       lt  style gt  x000D   x000D   lt  head gt  x000D   lt body gt  x000D       lt div id  main  gt  x000D          Viewport-Percentage Test x000D       lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   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

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

Examples related to html

Examples related to css