Shulou(Shulou.com)06/01 Report--

This article mainly shows you "css how to achieve container query", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "css how to achieve container query" this article.

Container query 1. Basic concept

The container query enables us to style the element based on the size of its parent element, which is similar to the @ media query, except that it judges based on the size of the container rather than the size of the viewport. This has always been a problem with responsive design because we sometimes want the component to adapt to its context.

two。 Usage

For container queries, you need to use the container attribute (which is an abbreviation for container-type and container-name) to specify an element as the container. Container-type can be width, height, inline-size, block-size. Inline-size and block-size are logical attributes and may produce different results depending on the mode in which the document is written.

Main, aside {container: inline-size;}

You can use @ container in a manner similar to media queries. It should be noted that the rules are expressed differently in parentheses (inline-size > 30em instead of min-width: 30em should be used in container queries). This is part of the media query level 4 specification. When the container width is greater than 30rem, switch to the flex layout:

@ container (inline-size > 30em) {.card {display: flex;}}

The CSS Containment Level 3 specification is currently in working draft, which means that the syntax may change at any time.

3. Current state

Currently, container queries are not available in mainstream browsers, so you can look forward to the implementation of container queries in browsers.

These are all the contents of the article "how to implement Container query in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.