Media Queries

Graphic with examples of CSS media queries

What are media queries?

Media queries are part of the Cascading Style Sheets (CSS) and are used to adapt the layout of a website or application to different devices and screen sizes. They allow a website to be displayed differently on a desktop computer than on a smartphone or tablet.

What are media queries used for?

Media queries are used to enable responsive web design. With the help of media queries, the style and structure of a website can be adapted depending on the screen size, resolution and other properties of the device. This ensures that the website is optimally displayed on all devices and offers a good user experience.

Examples of media queries

One example of the use of media queries is the adjustment of the font size. On a large screen, a larger font size can be used for headings, while on a small screen the font size is reduced in order to utilise the space more efficiently.

Another example is the customisation of the navigation. On a desktop computer, the navigation can be displayed horizontally, while on a smartphone the navigation is arranged vertically to make optimum use of the limited space on the screen.

By using media queries, developers can ensure that their websites and applications look good and are user-friendly on different devices and screen sizes.

Related Glossare