The and operator in media queries. Responsive and mobile design with CSS3 Media Queries
The @media CSS rule is used to change CSS styles based on certain device characteristics related to the display of content, such as width, height, orientation, screen resolution, and so on. It is widely used in responsive web design.
Browser support
| Property | Opera | IExplorer | Edge |
|||
|---|---|---|---|---|---|---|
| @media | 21.0 | 3.5 | 9.0 | 4.0 | 9.0 | 12.0 |
CSS syntax:
@media not | only media type and(media function) ( ...CSS code }Let's take a closer look at what the syntax of this rule consists of.
Logical operators
You can combine media queries using Boolean operators:
| Meaning | Description |
|---|---|
| and | Operator and ("AND") is used to combine multiple media queries into one. |
| not | Operator not ("Logical NOT") reverses the result - if the media query was true without "not" then he will become false, and vice versa. |
| only | Operator only ("Only") can be used to hide stylesheets from legacy browsers that cannot process (ignore) a media query containing this logical operator. |
| , | Operator "," allows you to combine multiple media queries separated by commas. If at least one request returns "true"(matches), then the condition is satisfied and the styles will be applied. This operator behaves like a logical operator OR ("OR"). |
Devices (media type)
You can use media queries for specific device types:
| Meaning | Description |
|---|---|
| all | Suitable for all types of devices. This is the default value. |
| aural | Designed for speech synthesizers. |
| braille | Devices for reading Braille font (relief-dot tactile font intended for writing and reading by blind and visually impaired people). The value is considered obsolete. |
| embossed | Devices intended for print Braille font. The value is considered obsolete. |
| handheld | Designed for portable devices(small screen and limited bandwidth - bandwidth). The value is considered obsolete. |
| Created for printed pages and for print preview mode. | |
| projection | Projection type devices ( projectors). The value is considered obsolete. |
| screen | Screens computer. |
| speech | Speech synthesizers, screen readers (for reading pages out loud). |
| tty | Devices that use a character set fixed width, for example, teletypewriters or terminals. The value is considered obsolete. |
| tv | Devices television type(low resolution, limited scrolling capabilities, audio capability). The value is considered obsolete. |
Media function
| Meaning | Description |
|---|---|
| aspect-ratio | The ratio of the width and height of the viewport (screen aspect ratio). This value consists of two positive integers separated by a slash ("/"). The first number is the ratio of pixels horizontally, and the second number is vertical. For example: aspect-ratio : 5/4 (ratio of five to four). |
| color | Specifies the number of bits per color component of the output device. If the device is not a color device, then this value is zero. . For example, if the display uses 4 bits to red and blue, and 5 bits turns green, the device is considered to be using 4 bit to the color component. |
| color-index | The number of colors the device can display. |
| device-aspect-ratio | The ratio of the width and height of the output device's viewing area (aspect ratio). This value consists of two positive integers separated by a slash ("/"). The first number is the ratio of pixels horizontally, and the second number is vertical. For example: device-aspect-ratio : 5/4 (a ratio of five to four). Media Queries Level 4". |
| device-height | Determines the height of the output device (the entire screen or page, not just the displayed area). The value is deprecated and removed from "Media Queries Level 4". |
| device-width | Specifies the width of the output device (the entire screen or page, not just the displayed area). The value is deprecated and removed from "Media Queries Level 4". |
| grid | Determines whether the output device is grid-based (for example, a terminal "tty" or phone display with one fixed font), in this case the value will be 1 , if the device is raster, then the value will be equal to 0 . |
| height | Sets the height of the viewport (using ). |
| max-aspect-ratio | The maximum width to height ratio of the viewport (screen aspect ratio). This value consists of two positive integers separated by a slash ("/"). The first number is the ratio of pixels horizontally, and the second number is vertical. |
| max-color | Defines the maximum number of bits per color component of an output device. Only positive values are allowed. |
| max-color-index | The maximum number of colors the device can display. Negative values are not allowed. |
| max-device-aspect-ratio | The maximum width to height ratio of the output device's viewing area (aspect ratio). This value consists of two positive integers separated by a slash ("/"). The first number is the ratio of pixels horizontally, and the second number is vertical. The value is deprecated and removed from "Media Queries Level 4". |
| max-device-height | Defines the maximum height of the output device (the entire screen or page, not just the display area). The value is deprecated and removed from "Media Queries Level 4". |
| max-device-width | Defines the maximum width of the output device (the entire screen or page, not just the displayable area). The value is deprecated and removed from "Media Queries Level 4". |
| max-height | Sets the maximum height of the viewport (using CSS units). |
| max-monochrome | Specifies the maximum number of bits per pixel of a monochrome device. If the device is not monochrome, the value will be 0. . |
| max-resolution | Indicates the maximum resolution of the output device (such as a monitor or printer). The resolution can be specified as in dpi(dpi), and in points per centimeter(dpcm). |
| max-width | Sets the maximum width of the viewport (using CSS units). |
| min-aspect-ratio | The minimum width to height ratio of the viewport (screen aspect ratio). This value consists of two positive integers separated by a slash ("/"). The first number is the ratio of pixels horizontally, and the second number is vertical. |
| min-color | Defines the minimum number of bits per color component of an output device. Only positive values are allowed. |
| min-color-index | The minimum number of colors a device can display. Negative values are not allowed. |
| min-device-aspect-ratio | The minimum width to height ratio of the output device's viewing area (aspect ratio). This value consists of two positive integers separated by a slash ("/"). The first number is the ratio of pixels horizontally, and the second number is vertical. The value is deprecated and removed from "Media Queries Level 4". |
| min-device-height | Defines the minimum height of the output device (the entire screen or page, not just the display area). The value is deprecated and removed from "Media Queries Level 4". |
| min-device-width | Defines the minimum width of the output device (the entire screen or page, not just the displayable area). The value is deprecated and removed from "Media Queries Level 4". |
| min-height | Sets the minimum height of the viewport (using CSS units). |
| min-monochrome | Specifies the minimum number of bits per pixel for a monochrome device. If the device is not monochrome, the value will be 0. Only positive integers are allowed. |
| min-resolution | Specifies the minimum resolution of the output device (such as a monitor or printer). The resolution can be specified as in dpi(dpi), and in points per centimeter(dpcm). |
| min-width | Sets the minimum width of the viewport (using CSS units). |
| Indicates the number of bits per pixel of a monochrome device. If the device is not monochrome, the value will be 0. Only positive integers are allowed. | |
| orientation | Determines whether the viewing area is in landscape mode—the screen is wider than it is tall—or in portrait mode—the display is taller than or equal to the width. For landscape orientation the value is used: orientation : landscape , and for portrait and orientation : portrait . |
| resolution | Indicates the resolution of the output device (such as a monitor, or a printer). The resolution can be specified as in dpi(dpi), and in points per centimeter(dpcm). |
| scan | Specifies the output device scanning method. The word scanning used in this context does not refer to an image scanner, such as a scanner used to digitize a photograph. Rather, it refers to the process by which an image is drawn on a television screen (or other device). In order to specify the device scan type, you must specify one of the values: interlace scanning- (interlace), progressive scan(progressive). |
| width | Sets the width of the viewport (using CSS units). |
Multimedia functions (Media Queries Level 4)
media = "mediatype rel = "stylesheet" href = "stylesheet.css" >Note that this uses the same syntax for the media attribute value as the @media rule.
Connecting media queries using a tag 2. Using a CSS rule @media inside an HTML tag
Please note that when using the media attribute of the tag 2. Using a CSS rule @media inside an HTML tag
Additionally, you can use the @import rule, which allows you to copy styles from other CSS files:
@import url ("main.css") (min-width :481px ) and (max-width :768px ); /* import the contents of the css file, which is intended for devices with screen resolutions ranging from 481 pixels to 768 pixels */ @import url("print.css") print; /* import the contents of the css file, which is intended for printed pages and for print preview mode */ @import url ("protv.css") projection, tv; /* import the contents of the css file, which is intended for projection type and television type devices */ @import url("file.css") screen and(orientation:landscape); /* import the contents of the css file, which is intended for computer screens AND landscape orientation.*/Please note that the @import rule increases the number of connections to the server, since the file you are linking to needs to be downloaded and analyzed (an additional request to the server is created). Based on the rules and recommendations of PageSpeed Insight ( Google) related to page optimization, It is recommended to avoid using the @import rule.
Media Queries Used in Bootstrap 4
In this section, we will look at the main media queries that are used in Bootstrap 4. Bootstrap This HTML, CSS And Javascript framework for creating responsive pages.
Because Bootstrap Designed to be mobile first, the framework's developers use multiple media queries to create smart breakpoints for layouts and interfaces. These breakpoints are basically based on the minimum viewport width and allow elements to scale as the viewport changes.
Let's look at what minimum-width-based breakpoints (the min-width media function) are used in Bootstrap 4:
// Small devices (landscape phones, minimum viewport width 576px and above) @media(min-width: 576px) ( ...CSS code } // Medium devices (tablets, minimum viewport width 768px and above) @media(min-width: 768px) ( ...CSS code } // Large devices (desktops, minimum viewport width 992px and above) @media(min-width: 992px) ( ...CSS code } // Extra large devices (large desktops, minimum viewport width 1200px and above) @media(min-width: 1200px) ( ...CSS code }Bootstrap mostly uses the above query ranges for layout, grid system, and components, but sometimes uses media queries that go in the other direction (specified viewport size or smaller).
Let's look at what minimum-width-based breakpoints (the max-width media function) are used in Bootstrap 4:
// Extra small devices (portrait phones, maximum viewport width 576px and below) @media(max-width: 575.98px) ( ...CSS code } // Small devices (landscape phones, maximum viewport width 768px and below) @media(max-width: 767.98px) ( ...CSS code } // Medium devices (tablets, maximum viewport width 992px and below) @media(max-width: 991.98px) ( ...CSS code } // Large devices (desktops, maximum viewport width 1200px and below) @media(max-width: 1199.98px) ( ...CSS code }IN Bootstrap 4 There are also breakpoints targeting a specific segment of the screen size using the minimum and maximum viewport width (the min-width and max-width media functions):
// Small devices (landscape phones, minimum viewport width 576px and maximum viewport width 768px) @media(min-width: 576px) and(max-width: 767.98px) ( ...CSS code } // Medium devices (tablets, minimum viewport width 768px and maximum viewport width 992px) @media(min-width: 768px) and(max-width: 991.98px) ( ...CSS code } // Large devices (desktops, minimum viewport width 992px and maximum viewport width 1200px) @media(min-width: 992px) and(max-width: 1199.98px) ( ...CSS code }Note that breakpoints targeting a specific segment use the logical operator and("AND"), which is used to combine multiple media queries into one, in our case this is the value for the minimum and maximum viewport width.
Similarly, media queries can span multiple breakpoint segments:
// Medium and Large devices (tablets and desktops, minimum viewport width 768px and maximum viewport width 1200px) @media(min-width: 768px) and(max-width: 1199.98px) ( ...CSS code }Setting the viewing area
Please note that the viewport determines how the web page is displayed on a mobile device, if it is not set, then the page width is considered to be the standard value and it is reduced on the mobile device to fit on its screen.
To ensure that mobile browsers do not automatically resize site pages, it is necessary in the tag Place a meta tag that tells the browser how to handle page dimensions and rescaling:
name = "viewport" content = "width=device-width, initial-scale = 1">- The name attribute specifies the document name as metadata, the value "viewport" gives a hint to the browser about the size of the initial viewport size. The function of the content attribute is to set values for this attribute.
- The width=device-width value of the content attribute tells the page width to be set to the device screen size in device-independent pixels ( device-independent pixel, dip), which allows the page to recalculate the position of elements for correct display on different screens. By analogy, it is possible to specify values for the height height=device-height .
- The initial-scale=1 value of the content attribute tells the browser to match 1:1 for CSS pixels and device-independent pixels, regardless of device orientation (landscape or portrait).
If all pages of your site are adapted for viewing on mobile devices, then placing the above meta tag is mandatory.
Available values:
| Attribute value | Definition |
|---|---|
| width | Specifies the width in pixels of the viewport (value is a positive integer or device-width ). |
| height | Specifies the height in pixels of the viewport (the value is a positive integer or device-height ). |
| initial-scale | Defines the relationship between the device width (device-width in portrait mode or device-height in landscape mode) and the size of the viewport. The higher the number, the higher the scale. The value is a positive integer from 0.0 to 10.0. |
| minimum-scale | Specifies the minimum zoom value (it must be less than or equal to maximum-scale ). The value is a positive integer from 0.0 to 10.0. |
| maximum-scale | Specifies the maximum zoom value (it must be greater than or equal to minimum-scale ). The value is a positive integer from 0.0 to 10.0. |
| user-scalable | A Boolean value that determines whether the user can zoom in on a web page. Default value is yes (user can zoom in). |
CSS version
CSS3Usage example
Let's consider an example in which we will set certain styles that the browser will use when viewing pages, and others when printing pages (in our case, to save printer resources, the color of all elements is black and the background color is white).
To allow users to view pages, we will install the following CSS styles:
h2(color: brown;) p( color : red ;) bodyWe will use the following CSS styles when printing and previewing the page:
@media print( h2, p( color : #000 ;) body }The final CSS file will look like this:
h2(color: brown;) /* set the element color to brown */ p( color : red ;) /* set the element color to red */ body( background-color : khaki ;) /* set the background color to khaki */ @media print( /* set the rule for printed pages and for print preview mode */ h2, p( color : #000 ;) /* group selector sets the element color to black */ body( background-color : #FFF ; ) /* set the background color to white */ }I draw your attention to an important point! If you use a rule before the main styles are set, they will not work without using the !important value, which overrides the significance of the last style defined, i.e. it overrides style conflicts and makes the style that has the !important value take precedence.
In other words, if we place a rule @media print ( ) at the beginning of the style sheet, then it will not work without the !important value for conflicting styles (and for him this is all styles):
@media print( /* set the rule for printed pages and for print preview mode */ h2, p( color : #000 !important ;) /* group selector sets the element color to black */ body( background-color : #FFF !important ; ) /* set the background color to white */ } h2(color: brown;) /* set the element color to brown */ p( color : red ;) /* set the element color to red */ body( background-color : khaki ;) /* set the background color to khaki */Now let's link our CSS file (css_pr_media.css) to the document using the element :
rel = "stylesheet" href = "../css_pr_media.css" >Example HTML markup:
Rapana
Rapana (lat. Rapana)- a genus of predatory gastropods from the family Muricidae. Distributed in the seas of the Pacific and Indian Oceans. Since 1947 it has been found in the Black Sea. The length of the shell is up to 12-15 cm. The shell is broadly oval in shape, the curl is low, the last whorl is swollen, grayish-brown in color with spiral ribs and axial thickenings. Active predators that feed on small bivalves such as mussels and oysters, the shells of which they open with the help of their strong muscular legs. Young rapanas use their jagged tongue-drill to make holes in the shells of their victims and open them. They live on any type of bottom, moving with the help of their muscular legs.
Below is how this example appears in the browser, and the image shows how the page appears in the print preview of the page (the styles we set for printing).
Media queries are useful when you want to modify your site or app depending on a device"s general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).
Media queries are used for the following:
- To conditionally apply styles with the CSS @media and @import at-rules.
- To target specific media for the element contains style information for a document, or part of a document.">