Once, those who visited websites from smartphones and similar mobile devices only aroused laughter from those around them. Many simply could not understand why this is necessary, because there are such convenient stationary computers! Or, at worst, laptops. In addition, mobile Internet was then expensive.
As time went. Internet is cheaper. More phones and tablets went on sale. Some time later, the owners of popular sites puzzled their heads. According to statistics, it turned out that their resources are more often visited from smartphones than from stationary PCs!
In those days, sites were not optimized for viewing from mobile devices. Having come to the old resource from the phone, you would have to be content with small letters, small menu items and uncomfortable buttons.
The advent of CSS Media Queries
There was a need to layout resources so that they look good when viewed from any screen. At first, the practice of creating separate sites for each size was widespread. For example, a visitor who used a mobile phone got to one resource, and the one who "sat" from a computer got to another. But it was long, expensive and uncomfortable.
Then came the CSS3 Media Queries. With their help, there was a simple opportunity to implement a dynamic design.
What is a dynamic design?
This term is used if the appearance of the resource changes in accordance with the size of the screen on which it is viewed. How to understand this? Everything is simple.
Imagine you have a website. In the upper part there is a navigation menu. Horizontal It stretches to the full width of the page. Under it is a block with contact information. Phone and address are also spaced in two blocks and are located horizontally, next to each other. Under this block is the main content, and a sidebar is located on the left or right. Below, as usual, a footer.
This is a “classic” layout of components. It is great for a personal computer, but not very convenient for mobile phones. The horizontal menu is too wide. Contacts are located far from each other. To use the information from the sidebar, you’ll have to scroll the screen, and not everyone likes it.
The problem can be solved using responsive and mobile design with CSS3 Media Queries. Using media queries, we are rebuilding the location of the content ... Now everything works like this:
- above - a block with a vertical navigation menu;
- below it is a block with contacts, which are now also placed vertically;
- the sidebar content is not displayed on the side of the contents of the <main> tag, but OVER it.
This is the simplest example of what you can do with Responsive Web Design Media Queries. In fact, there are much more opportunities.
So what are media queries?
The term CSS Media Queries refers to the CSS3 module, with which you can make the page content adapt to certain conditions. For example, it begins to respond to the screen size, or to the orientation of the device (portrait / landscape).
How does the system understand that content needs to be changed? For this, media queries are used. They indicate certain parameters. If the device from which the visitor visited the site meets these parameters, predefined styles are included. They can be written both in a common CSS table or in a separate file.
CSS Media Queries Browser Compatibility
All modern browsers support this technique, from Safari to Chrome. Of course, users of older versions of Internet Explorer will have problems ... But let's be honest - those who still use older IEs can literally cause problems.
Responsive Layout Syntax Media Queries
You may have already encountered media queries when you included the stylesheet in html. Remember this line? <link rel = 'stylesheet' type = 'text / css' href = 'style.css'> Sometimes, another parameter was added to the end, which looked like this: media = 'screen'.
This is a media query! It means that the specified style file will work on devices equipped with a screen. Instead of screen, you can specify print - in this case, the styles from the file are applied if the page is printed.
The following attributes can be used:
- all - universal option, used by default, used in all cases;
- scrteen - screens (computers, laptops, tablets, smartphones and everything that is equipped with a display);
- print - printers;
- projection - projectors;
- speech - speech browsers;
- braille - for devices for the visually impaired;
- tv - for TV screens.
That is not all. There are some additional CSS Media Queries attributes , but they are rarely used. In addition, you can omit the parameter at all - by default, all will be turned on .
Media inquiry structure
Instead of creating a style file, you can use css code . It looks like this:
@media screen and (max-width: 1024px) { (there will be styles }
After the @media directive , which makes it clear that the media query will be used, there is an indication of the type of device ( screen - screen) and additional parameters. The above example uses the CSS Media Queries Max Width property . This means that the styles indicated in braces will be used if the screen size of the user's device does not exceed 1024 px. Screen and and are optional. You can write like this:
@media (max-width: 1024px) {}
In this case, the properties will be used on any devices, and not just those equipped with a screen.
Specify multiple options
Suppose you want to somewhat limit the range of devices on which the selected styles will be applied. Let's say you want to show properties only to those who visit your site from a smartphone whose screen size is not less than 320 px, but not more than 500 px. In this case, the request takes the following form:
@media (min-width: 320px) and (max-width: 500px) {}
If you are familiar with programming, nj knows what the and operator is for . For those who are not up to date: it checks whether both conditions are true. That is, to activate the properties in the request, the screen must be at least 320 and not more than 500 pixels.
The number of and operators is not limited to one. You can bet them as much as you want. For example, try to create certain sizes for the screens of smartphones and completely different ones for TVs.
An important point is the orientation of the user device. Someone browses sites from a smartphone with a portrait orientation, someone - with a landscape. For the former, an additional condition is required orientation: portrait, for the latter, respectively, orientation: landscape. These lines are also shown in brackets after the @media command . You can separate them with and.
Another interesting nuance. Instead of and, you may well use the or operator . He needs at least one condition in the request to be true! For instance:
@media (max-width: 500px) or (orientation: portrait ) {}
If the screen is smaller than 500 px OR portrait orientation is used, the styles in braces will take effect.
Keyword not for finer tuning
You can insert the word not in the media query . This is done like this:
@media (not max-width: 700px) {}
Properties are activated if the maximum width is not 700 pixels.
Media functions
Queries can use several predefined functions. You can get to know everyone on the W3C website . For most typesetters, it’s enough to own three main ones:
- orientation (we already talked about it);
- width (width, it was also mentioned);
- height
Height is rarely used, but there are a few cases in which this setting may come in handy.
How and where to post requests?
Many coders for some reason put them at the very end of the stylesheet. For example, the main styles are listed first, and then, at the bottom of the document, queries are placed.
It's not very good. It’s much more convenient to place properties for different devices right after the main styles. For example, you have a div that is given a red font color:
div {
color: red;
}
Immediately after it we indicate the request:
@media (min-width: 320px) {}
We prescribe the properties.
This approach will be cumbersome if you use "pure" css. Preprocessors come to the rescue. They have many interesting features for a more accurate application of queries.
Another option is to place properties for different devices in different style files. This is especially convenient if you use the import preprocessor directive. The result is easy-to-edit, clean code.
Which option to use? It all depends on personal preferences and features of the team. Perhaps, at your place of work, a certain method of placing media queries will already be adopted.
Also do not forget that you can simplify your life with the latest software tools. It's not just about preprocessors. Using Gulp Group CSS Media Queries can make the process much more convenient. We recommend that you master this tool or some of its analogues.