Media Query CSS For All Devices With Example -

In this tutorial, I will discuss the media query CSS for all devices. Actually, media query CSS or CSS3 comes from CSS2. In CSS2 the @media rule, all the styles were based on different types of devices like computer screens, printers and television, and so on.

On the other hand, media queries css3 inherits the rules of CSS2 media types and checks for the capability of the device instead of the type of device.

We can obtain the below features using a media query.

• width and height of the viewport
• width and height of the device
• orientation of the device whether the device is in landscape mode or portrait mode.
• resolution of the device

Media queries are used to deliver predefined stylesheets according to the device such as desktops, laptops, tablets, and mobile phones automatically.

Also read, Overflow in CSS with Example

Supported browsers of media queries are as follows

Number of media types:-

• all:- Used for all devices
• print:- Used for printers
• screen:- Used for computer screens, laptops, smartphones, etc.
• speech:- Used for screenreaders…