CODEWITHSUNDEEP
htmlcssmedia-queries
Hello Lili
Hello Lili

Reputation: 1587

Media queries based on height

I have a site which contains a header image that I want to fit 70% of the screen height on all screens and on the remaining space I want to print some text.

Should I use javascript or should I use media-queries?

Where can I find the standard height parameters for which I have to write the media queries? I found the standard resolutions based on width here.

Upvotes: 1

Views: 587

Answers (1)

Kyrbi
Kyrbi

Reputation: 2260

There is a vh that will work for you. 1vh equals to 1% of browsers viewport. So if you set header{height:70vh;} it will use 70% of what user can see.

Additional relative lengths:
There are more relative lengths than just vh. There is:

  • vh - Relative to 1% of the height of the viewport
  • vw - Relative to 1% of the width of the viewport
  • vmin - Relative to 1% of viewport's smaller dimension
  • vmax - Relative to 1% of viewport's larger dimension

These lengths are supported by all browsers, https://caniuse.com/#feat=viewport-units.

source: https://developer.mozilla.org/en-US/docs/Web/CSS/length

Upvotes: 4

Related Questions