Date First Published: 14th February 2024
Topic: Web Design & Development
Subtopic: Web Design
Article Type: Computer Terms & Definitions
Difficulty: MediumDifficulty Level: 7/10
Learn about what media queries are in this article.
Media queries are a CSS functionality that allows different style rules to be defined based on the width and height of the viewport, orientation of the viewport, and screen resolution. This allows webpage content to be adapted to different screen sizes and resolutions and is a key part of responsive web design and mobile optimisation. Media queries have been a standard for responsive web design recommended by the W3C since June 2012.
Below are some commonly used media features.
| Value | Description |
|---|---|
| Orientation | Orientation of the viewport. Landscape or portrait |
| Max-height | Maximum height of the viewport |
| Min-height | Minimum height of the viewport |
| Height | Height of the viewport (including scrollbar) |
| Max-width | Maximum width of the viewport |
| Min-width | Minimum width of the viewport |
| Width | Width of the viewport (including scrollbar) |
Media queries act as filters for different screen sizes and are a common way to provide an adapted style sheet for desktops, laptops, tablets, and mobile phones. Like all rules within CSS, the ones that appear further down the list override the ones above them. All media information is retrieved using media queries and the display is automatically customised based on the properties of the device it is running on without requiring any user interaction.
Media queries consist of an optional media type and media features. They are introduced with "@media" and assign a CSS block to a page only if the following conditions are met. This means that appropriate resolutions and screen sizes do not have to be specified for each individual device.
Usually, the desktop styles are defined first, the styles for tablet users are defined next, and the smartphone styles are defined last. Sometimes, styles may be defined in the opposite order, which is considered mobile-first development.
Below is an example of a simple media query. It changes the background colour to yellow if the viewport is 600 pixels wide or wider. If the viewport is less than 600 pixels, the background colour will be purple. This could happen if the window is shrunk on a desktop computer or when using a mobile device, such as a smartphone to view the webpage.
If so, it is important that you tell me as soon as possible on this page.
Network Services Network Setups Network Standards Network Hardware Network Identifiers Network Software Internet Protocols Internet Organisations Data Transmission Technologies Web Development Web Design Web Advertising Web Applications Web Organisations Web Technologies Web Services SEO Threats To Systems, Data & Information Threats To Individuals Security Mechanisms & Technologies Computer Hardware Computer Software Ethics & Sustainability Legislation & User Data Protection
