Media queries were introduced into the CSS3 specification, resolving the old headache of all web developers: native CSS style management, depending on the technical characteristics of a particular device, and smooth style changes when changing the browser window size.
CSS Media Queries: Responsive in 5 Minutes
In simple words, a media query is a design that allows, depending on certain conditions, to choose which styles to use on the page. For example, if the width of the browser window is more than 1024px, we show a full menu that stretches to the entire width of the page, and if it is less than 1024px, we hide it (for example, using the display: none; property) and show the burger menu button instead, when clicked which reveals an elegant list (display: block;)
So, the simplest media CSS request will look like this:
.menu {display: block; }
.burger-menu { display: none; }
@media all and (max-width: 1024px) {
.menu { display: none; }
.burger-menu {display: block; }
}
Literally, you can read it this way: we always show the standard menu and hide the “burger menu”, but if the width of the browser window is less than 1024 pixels (max-width: 1024px means "to the maximum width of 1024px"), then we hide the old menu and show new. The properties in the media query will kill the existing ones. This will work both when you open the page from a mobile phone or tablet, or when the browser window smoothly shrinks, if we turn it into a window, grab one of the sides and pull it, reducing its size.
The query may look something like this in your editor:
If a brief overview of CSS media queries is enough for you, then you can safely practice and check their effect on your own site by installing CSS media queries on it. Mobile devices can also easily recognize your new styles if you do not forget to specify the viewport meta tag, which we will discuss in more detail below. However, we recommend that you familiarize yourself with their properties in more detail, learn about browser support, and consider the techniques of mobile first and desktop first.
Media Query Support
Perhaps this question is the key for those who seriously think about the visitors to their site and strive to make it as accessible as possible for everyone. Fortunately, media queries are already supported quite well and work fine in modern browsers, starting with the most problematic Safari 4 and Internet Explorer 9. If you already have to support Internet Explorer 8, you can connect the popular respond.js or css3-mediaqueries script to the page. js.
Set the right media CSS for mobile
In order for everything to work as it should, it is important not to forget to set the viewport tag in the <head> of the document. This is done as follows:
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
Thus, on the screens of mobile devices with a high pixel density, the correct ratio between the specified in CSS and the actual number of pixels will be established, and your site will be scaled. And the question no longer arises why media does not work when zooming in on CSS.
Graceful adaptability
The main task of media queries is to make the site responsive, that is, to “teach” it to automatically adapt to any formats and screen sizes. There are two ways to do this.
Designate media with CSS queries as some key points, which most often refers to popular device formats. For example, the simplest option: 320px - phones, 768px - tablets, 1024px and higher - laptops and personal computers. And at each of these points to change the fixed size of the blocks (as well as any other objects, such as video or images).
The second way is to make a smooth, “rubber” transition between several points, setting page elements not in rigid sizes in pixels, but in percent sizes. In this case, for example, by 1024px and higher, the menu block will occupy 50% of the page, gradually decrease along with the size of the browser window to 768px, and after that it will be stretched to 100% of the viewing window.
It is also worth mentioning the techniques of mobile first and desktop first, which differ in their approach to building queries. In the first case, we first describe the rules for all devices, including laptops and personal computers, and then gradually rebuild the site and remove unnecessary page elements. In the second, we first prepare the layout of the site for mobile devices, then when the browser window expands and the free space appears, we place the remaining content in them.
The trick from the master: specify media css - the rules in the link tag!
Few people know, but it is not necessary to write queries directly in CSS styles, you can specify them directly when connecting a file, directly in the <link> tag. The file will be connected depending on whether the page meets the criteria specified in the media property. You can use a similar method when importing styles from other files using @import.
In conclusion, it is worth noting that many popular libraries used in the development of sites contain built-in analogues of media queries. You should not neglect them. For example, Bootstrap allows you to prescribe classes in HTML code, thanks to which the blocks will automatically adapt when you change the screen size, but you will not be able to flexibly control this process, and the site will always be rigidly divided into 12 columns. After all, only with their help can you create a website that will be as flexible as possible to adapt to any devices, while being completely under your control.