Зміст курсу
Advanced CSS Techniques
Advanced CSS Techniques
@media Query
Let's consider the real use of all @media
functionality.
The most typical value of the media type is the screen
, as generally, we create web pages for devices with screens. Let's consider how to use it:
With the help of this rule, we told the browser that if the user device has a screen and its width is 768px or more, then the element with the container
class name has the property background-color
with the value of purple
.
We specify the screen width for which we want to set some css rules. Let's consider the following examples:
In the first example, we told the browser that for any devices with a screen width less than 1200px or equal to 1200px, apply the color
property with the value aliceblue
to the element with the class name container
.
In the second example, we informed the browser that if the screen width of any device exceeds 1680px or equal to 1680px, the color
property with the value gainsboro
should be applied to the element with the container
class name.
Operators are optional, and they are specified between media-type and media-feature.
and
lets the browser know that all the presented features must be satisfied.
This rule tells the browser that the element with the class name link
must have the text-decoration
property with the overline
value only if the user has a device with a screen AND the screen width is equal to or more than 380px AND the screen width is equal to or less than 840px.
By utilizing the ,
operator, we can indicate a group of expressions that, if any of them is met, will trigger the execution of a media query.
With the help of this rule, we told the browser that the element with the class name link
must have the text-decoration
property with the overline
value if the user screen width is more than 960px or equal to 960px OR user screen width is less than 540px or equal to 540px.
Дякуємо за ваш відгук!