Media queries
Media queries helps us to create tailor made experience for various devices. For example, the visitor page is mostly accessed from mobile devices and the backoffice application from laptops. When developing the application we start with the mobile viewport and design for it (mobile first approach). Then we go to bigger viewports (tablet, laptop) and utilize the free space accordingly.
Breakpoints
Each device has different available space, just have a look at this table for inspiration. In order to manage them, we define breakpoints, and to do so, we use units called em.
Custom media queries are located in folder stylesheet / base / media_queries.css
These are our most used media-queries breakpoints:
| Breakpoint | Size (em) | Size (px) | Usage |
|---|---|---|---|
--medium |
(min-width: 30em) |
(min-width: 480px) |
For wide mobiles, used in many cases |
--large |
(min-width: 57.5em) |
(min-width: 768px) |
For tablets, used in menus, layout, header |
--wide |
(min-width: 75em) |
(min-width: 1200px) |
For desktops, used in layout, menu, dashboard - for adjusting font-size and margins on desktops |
Additionally, we have two another breakpoints for adjusting margins on tablets and desktops - they are used in the layout.css file.
| Breakpoint | Size (em) | Size (px) | Usage |
|---|---|---|---|
--up-to-large |
(max-width: 47.9em) |
(min-width: 766.4px) |
Used in layout.css and table.css so far |
--up-to-medium |
(max-width: 29.9em) |
(min-width: 478.4px) |
Used only in table.css so far |
Usage
When working with css one can utilize this technique. For example, let's change the color of this box based on viewport.
HTML
<div class="ba media-queries-demo">
Resize the browser
<i class="fas fa-expand-arrows-alt"></i>
</div>CSS
.media-queries-demo {
background-color: var(--clr-people-primary);
height: 150px;
width: 150px;
display: flex;
align-items: center;
justify-content: center;
@media (--medium) {
background-color: var(--clr-action);
}
@media (--large) {
background-color: var(--clr-primary);
}
@media (--wide) {
background-color: var(--clr-favorite);
}
}