CSS कार्य मिनट (), अधिकतम () और क्लैंप ()

ब्राउज़र का समर्थन

सीएसएस तुलना कार्य

मिन () फ़ंक्शन

.element {
    width: min(50%, 500px);
}

फ़ंक्शन अधिकतम ()

.element {
    width: max(50%, 500px);
}

क्लैंप () फ़ंक्शन

.element {
    width: clamp(200px, 50%, 1000px);
}

• किसी तत्व की चौड़ाई कभी छोटी नहीं होगी 200px।
• फ़ंक्शन का दूसरा पैरामीटर, जैसा कि सेट किया गया है 50%, केवल तभी उपयोग किया जाएगा जब व्यूपोर्ट की चौड़ाई बड़ी 400pxऔर छोटी हो 2000px।
• आइटम की चौड़ाई से अधिक नहीं होगी 1000px।

(कैसे क्लैंप () फ़ंक्शन के परिणामों की गणना की जाती है?

.element {
    width: clamp(200px, 50%, 1000px);
    /*  -    */
    width: max(200px, min(50%, 1000px));
}

.element {
    width: max(200px, min(50%, 1000px));
    /* ,      1150px */
    width: max(200px, min(575px, 1000px));
    /*   */
    width: max(200px, 575px);
    /*   */
    width: 575px;
}

OnContext मायने रखता है

▍मथ भाव

.type {
  /*  font-size ,   12px  100px */
  font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);
}

हम पेज लेआउट को डिजाइन करने के तरीके में सीएसएस तुलना कार्य कैसे बदल सकते हैं

बक्सों का इस्तेमाल करें

▍ साइडबार और मुख्य पृष्ठ क्षेत्र

.wrapper {
    display: flex;
}

aside {
  flex-basis: max(30vw, 150px);
}

main {
  flex-grow: 1;
}

Der हेडर फ़ॉन्ट आकार

.title {
    font-size: clamp(16px, 5vw, 50px);
}

.title {
    font-size: min(3vw, 24px); /*  ,     */
}

.title {
    font-size: max(16px, min(10vw, 50px));
}

.title {
    font-size: clamp(16px, (1rem + 5vw), 50px);
}

ErsDecorative हेडर

.section-title:before {
  content: attr(data-test);
  font-size: max(13vw, 50px);
}

Areas विभिन्न देखने के क्षेत्रों में आउटपुट सुगम ग्रेडिएंट

.element {
    background: linear-gradient(135deg, #2c3e50, #2c3e50 60%, #3498db);
}

@media (max-width: 700px) {
    .element {
        background: linear-gradient(135deg, #2c3e50, #2c3e50 25%, #3498db)
    }
}

.element {
    background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db);
}

▍ पारदर्शी ढाल

.element {
    background: linear-gradient(to top, #000 0, transparent max(20%, 20vw));
}

▍ डायनेमिक बाहरी मार्जिन

h1, h2, h3, h4, h5 {
    margin: 7vh 0 1.05rem;
}

@media (max-height: 2000px) {
    h1, h2, h3, h4, h5 {
        margin: 2.75rem 0 1.05rem;
    }
}

h1, h2, h3, h4, h5 {
    margin: min(7vh, 2.75rem) 0 1.05rem;
}

Er कंटेनर चौड़ाई

.container {
    max-width: 780px;
    width: 80%;
}

.container {
    max-width: min(80%, 780px);
}

Ent वर्टिकल इंडेंट

.hero {
    padding: clamp(2rem, 10vmax, 10rem) 1rem;
}

▍बाउंडरी और छाया

.element {
    box-shadow: 0 3px 10px 0 red;
    border: min(1vw, 10px) solid #468eef;
    border-radius: clamp(7px, 2vw, 20px);
    box-shadow: 0 3px clamp(5px, 4vw, 50px) 0 rgba(0, 0, 0, 0.2);
}

ग्रिड लेआउट की कोशिकाओं के बीच betweenDistance

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: clamp(1rem, 2vw, 24px);
}

इकाइयों के बिना मूल्यों की तुलना करने के लिए सीएसएस कार्यों में प्रयोग करें

.element {
    width: clamp(0, 10vmax, 10rem);
}

That ब्राउज़रों के लिए निरर्थक तंत्र जो न्यूनतम (), अधिकतम () और क्लैंप () का समर्थन नहीं करते हैं

1. बैकअप तंत्र का मैनुअल कॉन्फ़िगरेशन

.hero {
    padding: 4rem 1rem;
    padding: clamp(2rem, 10vmax, 10rem) 1rem;
}

2. सीएसएस निर्देश का उपयोग करना का समर्थन करता है

.hero {
    /*     ,   min() */
    padding: 4rem 1rem;
}

@supports (width: min(10px, 5vw)) {
   /*   ,   min() */
  .hero {
    padding: clamp(2rem, 10vmax, 10rem) 1rem;
  }
}

▍ कंटेंट की उपलब्धता के बारे में