Media queries are a CSS feature that allows web page content to adapt to different screen sizes and resolutions. They are an integral part of flexible web design and are used to customize the look of websites for multiple devices with different screen sizes. So, Media Queries is a CSS3 module that allows you to convert content to such conditions as the screen resolution of your smartphone or computer. It became the recommended W3C standard in June 2012 and is actively used today in web development and graphic design.
CSS media queries are useful if you want to apply styles depending on the general type of device (for example, print or screen), specific characteristics (for example, browser window width), or the environment (for example, ambient light conditions). The huge number of devices connected to the Internet available today makes media queries an important tool for creating websites and applications that are stable enough to work on any equipment.
History
Media queries were first identified in the original CSS proposal by Hocon Wium Lie in 1994, but at that time did not become part of CSS1. The 1997 HTML4 Recommendation provides an example of how these components could be added in the future.
In 2000, the W3C began work on Media Queries. The first public working draft for media queries was published in 2001. The specification became the W3C recommendation in 2012 after browsers added support.
How are media queries written in CSS?
Requests can be inserted into the HTML file of the web page or included in a separate .CSS file to which it refers. The following is a description and an example media query in CSS:
@media screen and (max-width: 768px)
{
header {height: 70px; }
article {font-size: 14px; }
img {max-width: 480px; }
}
The media request above is activated if the user's browser window is 768 pixels wide or less. This can happen if you narrow your window on a desktop computer or use a mobile device, such as a tablet, to view web content.
How to use CSS3 media queries?
In responsive web design, media queries act as filters for different screen sizes. Like all modules in a cascading style sheet, those that appear further down the list redefine the ones above them. Therefore, default styles are usually defined first in the CSS document, followed by media queries for different screen sizes. For example, desktop styles can be defined first, and then a multimedia query with styles for tablet users, and then for smartphone users. Styles can also be defined in reverse order.
While minimum width is the most common feature used in media queries, many others are also widely available. Image dimensions in CSS media queries include:
- minimum width of the device;
- Minimum device height
- aspect ratio;
- maximum color index;
- maximum resolution;
- screen orientation.
For example, a resolution value can be used to detect HiDPI displays (such as retina images) and load high-resolution graphics instead of standard images.
Usage and errors
Why don't CSS media queries work? This component consists of a media type and one or more expressions using media functions that return either true or false. The result of the query is true if the media type indicated in it matches the type of device on which the document is displayed, and all the expressions in the media query are true. In cases where CSS media queries do not work, you need to check the appropriate style rules and cascading standards. Perhaps this data contains an error.
Media Types
The media type can be declared in the header of the HTML document using the “media” attribute inside the <link> element. The value of the media attribute indicates on which device the linked document will be displayed. Media types can also be declared in XML processing instructions, @import at-rule and @media at-rule. The "all" media view can also be used to indicate that a style sheet applies to all types of media.
What is CSS?
CSS (Cascading Style Sheet or Cascading Style Sheets) is used to format web page layouts, define text styles, table sizes, and other aspects of web content that previously could only be defined in the HTML structure of the page.
CSS helps web developers create a single format for multiple pages on a site. Instead of defining the appearance of each table and each block of text in HTML, styles are defined only once in a CSS document. When a format is defined in a cascading style sheet, it can be used by any page that links to a CSS file. In addition, CSS makes it easy to style across multiple pages at once. For example, a web developer might plan to increase the default text size from 10 to 12 pt on fifty pages of a website. If at the same time all the pages link to the same stylesheet, it will be enough to change the size of the text only in the table, and on all pages it will be the right size.
Although CSS is great for creating text styles, it is also useful for formatting other aspects of a web page’s layout. For example, CSS can be used to determine the filling of table cells, the style, thickness and color of the border, as well as to fill image elements or other objects. CSS, compared to HTML, gives web developers more control over how web pages look.
Types of Media Queries
Media types describe the general category of device. Although websites are usually designed with screens in mind, a programmer can create styles designed for special devices such as printers or audio editors. For example, this CSS snippet is for printers: @media print {...} .
You can also target multiple devices. For example, this @media rule uses two media queries to target screen and print devices: @media screen, print {...}.
CSS Media Features
Media features describe the specific characteristics of a user agent, output device, or environment. For example, you can apply certain styles to widescreen monitors, computers, or devices that are used in low light conditions. In this example, styles are applied when the main user input mechanism (for example, the mouse) can hang over the elements: @media (hover: hover) {...}.
Many multimedia functions are range functions, which means they can be prefixed with “min-” or “max-” to express the restrictions of the minimum or maximum condition. For example, this command will apply styles only if the width of the browser viewport is equal to or less than 12,450px: @media (max-width: 12450px) {...}.
If you create a media function request without specifying a value, nested styles will be used until the function value is non-zero. For example, this CSS will apply to any device with a color screen: @media (color) {...}.
If the function is not applied to the device on which the browser is running, expressions containing this multimedia function are always false. For example, styles embedded in the following query will never be used because no speech device has a screen format: @media speech and (aspect ratio: 11/5) {...}.
Data sheet
Media queries are a key component of responsive design that allows you to adapt CSS based on various parameters or characteristics of the device. For example, a multimedia query may apply different styles if the screen is smaller than a certain size, or based on whether the user is holding his device in portrait or landscape mode.
The media query syntax is also used in other contexts, for example, in the media attribute of the <source> element, which can be set to the media query string to use to determine whether to use this source when selecting a specific image to use in the <picture element >.
The Window.matchMedia () method can be used to check the window for a request in the media. You can also use the MediaQueryList.addListener () function to notify you when the status of queries changes. With this feature, your site or application will be able to respond to changes in device configuration, orientation, or status.
Media Queries to Call Styles
Responsive web design has experienced slow loading of content. Now the process to eliminate this shortcoming is well documented. There are several ways that developers use to better download content and images on different devices.
One of them is the use of media queries that work to invoke user device styles based on its size. In the past, programmers have debated whether media queries are the best solution for mobile devices, and this debate continues. It has now been officially recognized that CSS media queries are a simple and effective way to serve various content for a number of devices, and the most commonly used queries are those that relate to the height and width of the viewport.
Call using an external stylesheet
CSS styles for media queries first check the type of media files for a user agent string before moving on to checking the physical attributes of the viewport. They are a CSS declaration that can be invoked using an external stylesheet. The external call will look like this: < link rel = "stylesheet" media = "and (min-width: 320px) and (max-width: 480px)" href = "css / yourstylesheet.css" /> .
A direct CSS call would look like this:
@media screen and (min-width: 320px)
and (max-width: 480px) {
/ * Insert your styles here
}.
CSS media queries are not modular, which means it can make their work difficult. An item request is similar to a media request because it uses CSS when certain conditions are met. However, these kinds of data are based on elements, not on the browser, which are not currently supported in CSS3. Elemental queries are gaining momentum, especially since they complement CSS media queries. This means that both can ultimately work together to create more modular and flexible designs.
Work with images
Scaling images for responsive design is a fairly simple process. However, there are several issues that need attention. We are talking about the loss of details and images during compression to place page content on smaller devices. To create scalable images, simply add the following code to the stylesheet:
img {
max-width: 100%;
}
This will reduce the image to fit the size of the container, which is less than the width of the image. Setting the maximum width to 100% means that the image will not grow larger than its actual size.
However, this can be a problem when it comes to website performance, because you are essentially delivering a full-size image to each device. There is no easy solution for this, especially if you are working on a site with outdated images. However, Adaptive Images is a plugin that can optimize your images based on screen sizes. The responsive design based on media queries from the Framework Foundation also allows you to share images based on screen sizes.
When working with images, you must use SVG, web fonts, web type, and CSS.