Search code examples
cssangularsassresponsive-designcompass-sass

How to provide CSS rules based on viewport height of different devices

How can I provide in an Angular or any other application CSS/SCSS rules that respond to the viewport height of different devices?

The viewport width is not a problem with @media (max-width: ...) {}, but how can I react to the height here?

For example, a 13-inch Macbook, 15-inch Macbook, etc.?

Solution

  • Simple just like max-width eg:

    @media screen and (max-width: 995px) , screen and (max-height: 700px) {
  ...
}

    For further help Read here