Container queries

Container queries बनाम media queries

Media queries layouts को viewport size से tie करते हैं। Container queries layouts को component container size से tie करते हैं। यह components को अधिक reusable बनाता है: वही card component एक sidebar में और full width में differently adapt करता है।

Container queries का उपयोग करना

पहले, एक container define करें। फिर उस container की width के आधार पर children को style करने के लिए @container का उपयोग करें।

.sidebar {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

@container (max-width: 399px) {
  .card {
    display: block;
  }
}

त्वरित जाँच: Container queries का media queries पर क्या फायदा है?

• Components अपने container के अनुसार adapt होते हैं
• वे faster हैं
• वे सभी browsers पर काम करते हैं