KandZ – Tuts

We like to help…!

CSS 36 💻 height and width media features

a - height media feature
height allows you to apply styles based on the height of the viewport
or the dimensions of an embedded document..
It is useful for creating responsive designs that adapt to different screen sizes
such as mobile devices and desktops
You can also use min-height and max-height
@media (height: 1024px) → applies styles when height is 1024 pixels
@media (min-height: 1024px) → applies styles when minimum height is 1024 pixels
@media (max-height: 1200px) → applies styles when maximum height is 1200 pixels

b - width media feature
width allows you to apply styles based on the width of the viewport
It is useful for creating responsive designs that adapt to different screen sizes
such as mobile devices and desktops
You can also use min-width and max-width
@media (width: 780px) → applies styles when width is 780 pixels
@media (min-width: 780px) → applies styles when minimum width is 780 pixels
@media (max-width: 1200px) → applies styles when maximum width is 1200 pixels

Leave a Reply