CSS Container Queries أصبحت مدعومة في جميع المتصفحات الرئيسية. هذه الميزة تغير من fundamentally how we think about responsive design.
ما هي Container Queries؟
Container Queries تتيح لك كتابة media queries بناءً على حجم المكون وليس حجم الشاشة. هذا يعني يمكنك كتابة مكون responsive يعمل في أي مكان في الصفحة.
component.css
/* Define container */
.card-container {
container-type: inline-size;
container-name: card;
}
.card-container {
container-type: inline-size;
container-name: card;
}
/* Default: vertical layout */
.card {
display: flex;
flex-direction: column;
}
/* When container is 400px+ wide */
@container card (min-width: 400px) {
.card {
flex-direction: row;
align-items: center;
}
.card img { width: 200px; }
}
/* When container is 700px+ wide */
@container card (min-width: 700px) {
.card { gap: 2rem; }
.card img { width: 300px; }
}
0 تعليق