"One important recent next step were container queries: .parent { container-name: parent; container-type: inline-size; } article { flex-direction: row; } @container parent (width < 40rem) { article { flex-direction: column; } } Instead of reacting to viewport size changes, we can react to size changes of HTML elements. With media queries, the whole page was responsive. With container queries, individual user interface elements can be responsive, too."
"Queries plus nesting # CSS now lets us nest rules. That makes container queries (and media queries) even more convenient: .parent { container-name: parent; container-type: inline-size; } article { flex-direction: row; @container parent (width < 40rem) { flex-direction: column; } } Approach: container query with breakpoints + grid layout # I love using grids for responsive layouts because they give you a lot of freedom when it comes to rearranging things. Consider the following example: A layout with content in .main-col and a fixed .sidebar. Layout on wide screens:"
Media queries adapt layouts to different viewport sizes, allowing changes like switching flex-direction between row on desktop and column on mobile. Container queries enable styles to react to the size of specific HTML elements by using container-name and container-type, allowing individual components to be responsive. Nested CSS rules make placing container and media queries inside selectors more convenient. Grid layouts combined with container breakpoints provide flexible rearrangement of components such as a main column and a sidebar across different widths. There is a need for inner breakpoints that target elements themselves to achieve finer-grained responsiveness.
Read at 2ality
Unable to calculate read time
Collection
[
|
...
]