Is there a css @media query that can identify a landscape or portrait display? [closed]

1. How to detect landscape mode in CSS?
2. Which CSS media queries feature has keyword values of landscape and portrait?
3. What is the difference between @media all and @media screen?
4. What @media does in CSS?

How to detect landscape mode in CSS?

Solution with CSS media queries

Below, we use the orientation @media query and let the content to adjust its layout depending on whether the browser window is in the landscape mode (the width is greater than the height) or portrait mode (the height is greater than the width).

Which CSS media queries feature has keyword values of landscape and portrait?

The orientation CSS media feature can be used to test the orientation of the viewport (or the page box, for paged media). Note: This feature does not correspond to device orientation.

What is the difference between @media all and @media screen?

@media is the actually media query. The word screen is adding the 'conditions' to the media query. So @media screen is telling the media query to apply (whatever other conditions) to screens. For example, @media screen and (max-width: 360px) will target only screens with a max-width of 360px.

What @media does in CSS?

The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.