CSS get height of screen resolution

Question

I m having a hard time getting the height of lower screen resolution because my screen resolution is 1920x1080   Does anyone know how to get height and width of the screen resolution   I checked my work on a 1024x768 resolution and it is rendered all messed up

User · Answer

You can bind the current height and width of the screen to css variables: var(--screen-x) and var(--screen-y) with this javascript:

var root = document.documentElement;

document.addEventListener('resize', () => {
  root.style.setProperty('--screen-x', window.screenX)
  root.style.setProperty('--screen-y', window.screenY)
})

This was directly adapted from lea verou's example in her talk on css variables here: https://leaverou.github.io/css-variables/#slide31

User · Answer

It is not possible to get the height of the screen from CSS  However  using since CSS3 you can use media queries to control the display of the template as per the resolution   If you want to code on the basis of height using media queries  you can define style-sheet and call it like this    lt link rel  stylesheet  media  screen and  device-height  600px     gt

User · Answer

Adding to  Hendrik Eichler Answer  the n vh uses n  of the viewport s initial containing block    element      height  50vh     Would mean 50  of Viewport height        width   75vw     Would mean 75  of Viewport width       Also  the viewport height is for devices of any resolution  the view port height  width is one of the best ways  similar to css design using   values but basing it on the device s view port height and width      vh   Equal to 1  of the height of the viewport s initial containing block    vw   Equal to 1  of the width of the viewport s initial containing block    vi    Equal to 1  of the size of the initial containing block  in the direction of the root element   s inline axis    vb    Equal to 1  of the size of the initial containing block  in the direction of the root element   s block axis    vmin   Equal to the smaller of vw and vh    vmax   Equal to the larger of vw and vh    Ref  https   developer mozilla org en-US docs Web CSS length Viewport-percentage lengths

User · Answer

You can get the window height quite easily in pure CSS  using the units  vh   each corresponding to 1  of the window height  On the example below  let s begin to centralize block foo by adding a margin-top half the size of the screen    foo      margin-top  50vh      But that only works for  window  size  With a dab of javascript  you could make it more versatile       root   css  --windowHeight      window   height        That code will create a CSS variable named  --windowHeight  that carries the height of the window  To use it  just add the rule    foo      margin-top  calc  var --windowHeight    2        And why is it more versatile than simply using  vh  units  Because you can get the height of any element  Now if you want to centralize a block foo in any container bar  you could       root   css  --containerHeight       bar   height          root   css  --blockHeight       foo   height        foo      margin-top  calc  var --containerHeight    2 - var --blockHeight    2       And finally  for it to respond to changes on the window size  you could use  in this example  the container is 50  the window height       window   resize function             root   css  --containerHeight       bar   height   0 5

User · Answer

In order to get screen resolution you can also use jquery  This link help you very much to resolve

User · Answer

To get the screen resolution use should use Javascript instead of CSS  Use screen height for height and screen width for width

User · Answer

You actually don t need the screen resolution  what you want is the browser s dimensions because in many cases the the browser is windowed  and even in maximized size the browser won t take 100  of the screen   what you want is View-port-height and View-port-width    lt div style  height  50vh width  25vw  gt  lt  div gt    this will render a div with 50  of the inner browser s height and 25  of its width    to be honest this answer was part of what  Hendrik Eichler wanted to say  but he only gave a link and didn t address the issue directly

User · Answer

You could use viewport-percentage lenghts   See  http   stanhub com how-to-make-div-element-100-height-of-browser-window-using-css-only   It works like this    element      height  100vh     For 100  screen height        width   100vw     For 100  screen width        More info also available through Mozilla Developer Network and W3C

User · Answer

Use height and width in percentage   For example   width  80   height  80

[css] CSS get height of screen resolution

Examples related to css