One of the most important tools in adaptive layout design is media queries. Media queries are special conditional constructions that allow you to apply styles only to certain devices.
Media queries are written as follows:
@media (terms) {
/* CSS code to be executed for the given condition */
}
Different values and constants can act as conditions. The following constructions are often used:
To determine the orientation
of the screen, we use the orientation key, which can have one of two values:
landscape
. This condition is true for devices with a horizontal screen orientation. Horizontal — An orientation in which the width of the viewport is greater than its height.portrait
. The condition is true for devices with an vertical screen orientation. Vertical - An orientation where the height of the viewport is greater than its width.<style>
@media (orientation: landscape) {
/* When the site is oriented horizontally, the background color will be black.
*/
body {
background: #FFF;
}
}
@media (orientation: portrait) {
/* When the site is oriented vertically, the background color will be black.
*/
body {
background: #000;
}
}
</style>
When using media queries, we can also base it on the width or height of the viewport. This is done using the usual CSS rules of width, min-width, max-width for width and height, min-height, max-height for height.
These conditions are used to create breakpoint. These are the boundaries of the values by which our layout is modified. Such stopping points allow you to have rules for monitors, tablets, phones, fridges, anything.
<style>
/* Here there'll be all the styles for devices with a viewport greater than 1400 pixels. */
@media (max-width: 1400px) {
/* Styles for devices whose viewport width is less than or equal to 1400 pixels, but greater than 990 pixels. These styles will be used for tablets and laptops with low resolution */
}
@media (max-width: 990px) {
/* Styles for devices whose viewport width is less than or equal to 990 pixels, but greater than 770 pixels. These styles will work for some mobile devices and tablets */
}
@media (max-width: 770px) {
/* Styles for devices whose viewport width is less than or equal to 770 pixels. That's a lot of mobile devices */
}
</style>
Note the order in which the properties are written. Remember that CSS is a cascading sheet, so you need to take note of the orders of style. In this case, the default style, which isn't in the media query, will be applied to the element first, then the styles will be applied one by one depending on the values in the media query's condition.
For example, with a viewport 770 width of 770 pixels for an element, the styles will be applied in the following order:
max-width: 1400px
.max-width: 990px
.max-width: 770px
.The approach described above is called Desktop First. We start by writing styles for large monitors, and then, using media queries, we add styles for progressively smaller viewport values. Its characteristic feature in media queries is the use of the max-width construction as a condition.
Alongside the Desktop First approach, we also have the Mobile First. Its peculiarity is that it first writes styles for mobile devices and then, using media queries, writes styles for larger viewport sizes. Desktop First used max-width, but Mobile First but min-width.
Styles written using the Mobile First approach are as follows:
<style>
/* Here there'll be all the styles for devices with a viewport less than 770 pixels. */
@media (min-width: 770px) {
/* Styles for devices whose viewport width is more than or equal to 770 pixels. */
}
@media (min-width: 990px) {
/* Styles for devices whose viewport width is more than or equal to 990 pixels, but less than 1400 pixels. */
}
@media (min-width: 1400px) {
/* Styles for devices whose viewport width is more than or equal to 1400 pixels */
}
</style>
Conditions within media queries can be combined. There are three logical operators for this:
and
and has a viewport width of at least 600 pixels:<style>
@media (orientation: portrait) and (min-width: 600px) {
.container {
/* For devices in portrait mode and a viewport width of at least 600 pixels, make elements with the container class 100 percent wide */
width: 100%;
}
}
</style>
<style>
@media (orientation: portrait), (min-width: 600px) {
.container {
/* For devices in portrait mode OR a viewport width of at least 600 pixels, make elements with the container class 100 percent wide */
width: 100%;
}
}
</style>
not
keyword at first.<style>
@media not all and (orientation: landscape) {
.container {
/* For devices in portrait mode (the condition looks like “NOT horizontal”) make items with the container class have a width of 100 percent */
width: 100%;
}
}
</style>
Media queries can be written not only inside CSS files, they can also be used in HTML when you include a style file. In this case, the media query is specified in the media
attribute.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Connecting CSS files</title>
<!-- General styles for the project -->
<link rel="stylesheet" href="style.css">
<!-- Styles for screens with a viewport of at least 750px -->
<link rel="stylesheet" media="screen and (min-width: 750px)" href="style750px.css">
</head>
<body>
<!-- Project markup -->
</body>
</html>
The Hexlet support team or other students will answer you.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
Sign up or sign in
Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.