An article in which we will get acquainted with media queries and learn how to use them to create adaptive websites. Let's look at the basic constructions of media queries for using them in page layout using the Bootstrap 3 and Bootstrap 4 frameworks.
What are media queries?Media queries are CSS rules that allow you to control the styles of elements depending on the values of the technical parameters of devices. In other words, these are constructs that allow you to determine, based on certain conditions, which styles should be used on a web page and which should not.
Media queries appeared in the CSS3 specification and are currently supported in all modern browsers (Chrome 4+, Firefox 3.5+, IE 9+, Opera 9+, Safari 4+).
Support for media queries in the IE8 browser is carried out by connecting the respond.js script to the page:
Media queries are designed to create responsive website designs. Adaptive design differs from others in that it can “adapt” (change) depending on the width of the screen of the device (browser). You can learn more about responsive design in the article “What is responsive markup”.
But when creating responsive web pages, you also need to pay attention to the viewport meta tag. This tag ensures that responsive website designs are displayed correctly on device screens with high pixel density. In other words, it establishes a mapping between the CSS and the physical resolution of the web page. You can learn more about how the viewport meta tag works in the article "Introducing meta viewport".
Connecting the viewport meta tag to a page in most cases is done like this:
Media Query Syntax
To create media queries, use the following syntax:
@media condition ( /* styles (they will be executed if the device matches the specified condition) )
Main device types:
- all - all devices (default).
- print - printers and page preview mode before printing.
- screen - devices with displays.
Logical operators:
- and - requires the mandatory fulfillment of all specified conditions.
For example: @media screen and (min-width: 1200px) and (orientation: landscape) ( /* CSS styles ... */ ) The CSS styles in the above example will only be executed if the page will be displayed on a device with a screen, have a viewport greater than 1200 pixels wide and be in landscape mode. - , (comma) - requires the mandatory fulfillment of at least one of the specified conditions in the media request. @media (min-width: 544px), (orientation: landscape) ( /* CSS Styles ... */ ) The CSS styles in this example will be applied to the page in two cases. Those. when the device has a viewport of at least 544 pixels (inclusive) or landscape orientation.
- not - is intended to negate the specified condition. It has lower priority in relation to the and operator, i.e. The not operator is always executed after and . @media not screen and (orientation: portrait), (min-width: 992px) ( /* CSS Styles ... */ ) CSS styles found in this rule will only be applied to the page if the device is not screen and will not have portrait orientation. And they (CSS styles) will be applied to document elements even when the device (browser) has a working area width of at least 992 pixels (inclusive).
Those. the request in the example above would be processed like this: @media not (screen and (orientation: portrait)), (min-width: 992px) ( /* CSS Styles ... */ )
To create a condition in @media, you can use the following functions:
- width - specifies the requirements for the width of the device (browser) viewing area. /* apply CSS styles only to devices with a viewport width of 320px */ @media (width: 320px) ( /* CSS styles ... */ )
- min-width - sets the minimum width of the viewport area in px, em or other units. /* for devices (browsers) that provide a minimum viewport width of 544px for a page */ @media (min-width: 544px) ( /* CSS Styles ... */ )
- max-width - indicates what the maximum working area of the device (browser) should be. /* styles that will be applied to page elements with a working area no larger than 1199 pixels */ @media (max-width: 1199px) ( /* CSS Styles ... */ )
- height , min-height and max-height - set requirements similar to the above functions, but in relation to the height of the viewport. /* styles that will be applied to page elements if the browser viewport is greater than 720px in height */ @media (min-height: 720px) ( /* CSS Styles ... */ )
- orientation is a function that checks in which mode (portrait or landscape) the page is displayed.
An example in which, depending on the screen orientation, one or another picture is displayed: /* landscape (landscape) is a mode in which, on the contrary, the width of the viewport is greater than its height */ @media (orientation: landscape) ( #background-image ( background : url(image1.png) no-repeat; ) ) /* portrait is a mode in which the height of the viewport is greater than the width */ @media (orientation: portrait) ( #background-image ( background: url(image2. png) no-repeat; ) ) - aspect-ratio (min-aspect-ratio , max-aspect-ratio) - allow you to specify how the width of the device should relate to the height. Only integer values can be used as values. /* for 16/9 aspect ratio displays */ @media screen and (device-aspect-ratio: 16/9) ( /* CSS styles ... */ ) /* for 1336/768 aspect ratio displays */ @media screen and (device-aspect-ratio: 1336/768) ( /* CSS styles ... */ )
- resolution (min-resolution, max-resolution) - indicates the resolution (pixel density) of the output device. The following units are used to measure resolution: dpi (dots per inch), dpcm (dots per centimeter), dppx (dots per pixel). /* for screens with a high pixel density (i.e. for those with a ratio of hardware pixels to CSS of at least 2) */ @media screen and (min-resolution: 2dppx) ( /* CSS styles ... * / ) /* when printing at resolutions above 300 dpi */ @media print and (min-resolution: 300dpi) ( /* CSS styles ... */ )
Media queries can also be used as the value of the media attribute of a link element. This will allow you to determine, depending on the device settings, which CSS files need to be included in the page and which not. Typically, this functionality is used when different CSS styles need to be applied to different classes of devices.
In addition, media queries can also be used in the @import rule, which is designed to import styles from other CSS files into the current one.
/* Imports styles from the styles-xs.css file into the current styles file only for devices that provide the web page with a viewport that is 543 pixels wide or less. */ @import url(styles-xs.css) (max-width: 543px);
Media queries for Bootstrap 3Organize media queries in ascending order of xs, sm, md and lg device classes (default):
/* Devices with very small screens (smartphones, less than 768px) */ /* CSS styles (default) - for viewport width 1200px */ )
The above queries should only be used in the order listed.
In order for media queries to be applied in any order, they must be expanded to include an additional max-width expression. This will force them to only work within the specified range.
@media (max-width: 767px) ( /* styles for xs devices */ ) @media (min-width: 768px) and (max-width: 991px) ( /* styles for sm devices */ ) @media (min-width: 991px) and (max-width: 1199px) ( /* styles for md devices */ ) @media (min-width: 1200px) ( /* styles for lg devices */ )
Media queries for Bootstrap 4The syntax of media queries for Bootstrap 4, which can only be used in the following order (successively increasing the minimum viewport width):
/* xs - devices (up to 576px) */ /* CSS for width that is less than 575px (inclusive) */ /* sm - devices (greater than or equal to 576px) */ @media (min-width: 576px) ( /* CSS for: 576px = 1200px */ )
List of media queries for the Bootstrap 4 framework, which can only be applied in reverse order (in descending order of the width of the browser window viewport):
/* xl-size (>=1200px) */ /* CSS for >=1200px */ /* lg-size (