Container Queries

1 example from SAP's documentation · no stylesheet in the package · Back to the gallery

About

Container queries are similar to media queries, but they allow you to apply styles to an element based on the dimensions of the element's container rather than the device’s viewport. For more information please visit the MDN website. Containment Context To define a container, you need to specify the container-type property on the element. The container-type can accept three options: size, inline-size, and normal. normal the element is not a query container for any container size, but it can be used to apply styles to the element .sap-container-type-normal @include sap-container-type(normal) size the container will not assume the position it has on the viewport, you must explicitly set the height and width of the container .sap-container-type-size @include sap-container-type(size) inline-size the element assumes the position it has on the viewport .sap-container-type-inline-size @include sap-container-type(inline-size) Mixins Mixin Container width @include sap-container-query-sm() max-width: 599px @include sap-container-query-md() 600px @include sap-container-query-lg() 1024px @include sap-container-query-xl() min-width: 1440px @include sap-container-query-from($width) user defined @include sap-container-query-until($width) user defined

UsingTheMixins

Container Type

.article-container {
        @include sap-container-type(inline-size);
        }

Container Query - Minimum Width

@include sap-container-query-from(640px) {
            .article {
            font-size: 20px;
            }
            }

Container Query - Maximum Width

@include sap-container-query-to(640px) {
                .article {
                font-size: 16px;
                }
                }

Container Query - Range

@include sap-container-query-between(480px, 768px) {
                    .article {
                    font-size: 18px;
                    }
                    }