लोड हो रहा है...

CSS यूनिट्स – पूर्ण संदर्भ गाइड

यह पूर्ण CSS यूनिट्स संदर्भ गाइड डेवलपर्स के लिए तैयार किया गया है ताकि वे अपने वेब डिज़ाइन और लेआउट में विभिन्न यूनिट्स का सही और प्रभावी उपयोग कर सकें। इस गाइड में सभी CSS यूनिट्स को श्रेणियों में विभाजित करके प्रस्तुत किया गया है: Absolute Length Units, Relative Length Units, Viewport Units, Container Query Units, Percentage Units, Angle Units, Time Units, Frequency Units, Resolution Units, Color Units, Function Units और Grid Units। प्रत्येक यूनिट के लिए सिंटैक्स, उदाहरण, उपयोग और ब्राउज़र सपोर्ट दिया गया है। डेवलपर्स इसे तेज़ी से रेफ़रेंस और डिज़ाइन निर्णय लेने के लिए उपयोग कर सकते हैं।

📊 Absolute Length Units

Unit Description Conversion Example Use Cases Browser Support
px पिक्सल - डिवाइस पिक्सल 1px = 1/96 inch width: 300px स्क्रीन लेआउट, बॉर्डर, शैडो सभी ब्राउज़र्स
cm सेंटिमीटर 1cm = 37.8px margin: 2cm प्रिंट स्टाइलशीट, भौतिक माप सभी ब्राउज़र्स
mm मिलीमीटर 1mm = 3.78px border: 1mm solid प्रिंट मीडिया, सटीक माप सभी ब्राउज़र्स
in इंच 1in = 96px page-break-after: 2in प्रिंट लेआउट, बड़े माप सभी ब्राउज़र्स
pt पॉइंट 1pt = 1.33px font-size: 12pt टाइपोग्राफी, प्रिंट मीडिया सभी ब्राउज़र्स
pc पाइका 1pc = 16px line-height: 1.5pc प्रिंट टाइपोग्राफी, कॉलम चौड़ाई सभी ब्राउज़र्स
Q क्वार्टर-मिलीमीटर 1Q = 0.25mm margin: 4Q प्रिंट लेआउट, बहुत सटीक माप आधुनिक ब्राउज़र्स

📊 Relative Length Units

Unit Description Relative To Example Use Cases Browser Support
em Em यूनिट Parent element की फ़ॉन्ट साइज font-size: 1.2em टाइपोग्राफी, टेक्स्ट आधारित स्पेसिंग सभी ब्राउज़र्स
rem Root em Root element की फ़ॉन्ट साइज margin: 2rem कंसिस्टेंट स्पेसिंग, स्केलेबल लेआउट IE9+
ex x-Height Current font में 'x' की ऊँचाई line-height: 2ex टाइपोग्राफी, वर्टिकल एलाइन्मेंट सभी ब्राउज़र्स
ch Character width '0' अक्षर की चौड़ाई width: 40ch टेक्स्ट कंटेनर, मोनोस्पेस लेआउट IE9+
cap Cap height कैपिटल लेटर की ऊँचाई margin-top: 1cap टाइपोग्राफी, वर्टिकल स्पेसिंग आधुनिक ब्राउज़र्स
ic Ideographic character CJK अक्षर की चौड़ाई width: 20ic पूर्व एशियाई टाइपोग्राफी आधुनिक ब्राउज़र्स
lh Line height Element की लाइन हाइट margin: 1lh वर्टिकल रिद्म, स्पेसिंग आधुनिक ब्राउज़र्स
rlh Root line height Root element की लाइन हाइट padding: 0.5rlh कंसिस्टेंट वर्टिकल स्पेसिंग आधुनिक ब्राउज़र्स

📊 Viewport Units

Unit Description Calculation Example Use Cases Browser Support
vw Viewport width 1% viewport width width: 50vw फुल-विथ लेआउट, रेस्पॉन्सिव डिज़ाइन IE9+
vh Viewport height 1% viewport height height: 100vh फुल-हाइट सेक्शन, हीरो एरिया IE9+
vmin Viewport minimum 1% छोटे viewport dimension font-size: 4vmin स्क्वायर एलिमेंट, रेस्पॉन्सिव टाइपोग्राफी IE9+
vmax Viewport maximum 1% बड़े viewport dimension width: 50vmax रेस्पॉन्सिव लेआउट, एडाप्टिव डिज़ाइन IE9+
vi Viewport inline 1% inline direction padding: 2vi लॉजिकल प्रॉपर्टीज़, अंतरराष्ट्रीय लेआउट आधुनिक ब्राउज़र्स
vb Viewport block 1% block direction margin: 3vb लॉजिकल प्रॉपर्टीज़, राइटिंग मोड आधुनिक ब्राउज़र्स
dvw Dynamic viewport width 1% dynamic viewport width width: 100dvw मोबाइल लेआउट, एड्रेस बार हैंडलिंग आधुनिक ब्राउज़र्स
dvh Dynamic viewport height 1% dynamic viewport height height: 100dvh मोबाइल फुल-हाइट UI आधुनिक ब्राउज़र्स
lvw Large viewport width 1% large viewport width max-width: 90lvw मोबाइल UI visible state आधुनिक ब्राउज़र्स
lvh Large viewport height 1% large viewport height min-height: 100lvh मोबाइल मैक्स व्यूपोर्ट आधुनिक ब्राउज़र्स
svw Small viewport width 1% small viewport width width: 100svw मोबाइल UI hidden state आधुनिक ब्राउज़र्स
svh Small viewport height 1% small viewport height height: 100svh मोबाइल मिनिमम व्यूपोर्ट आधुनिक ब्राउज़र्स

📊 Container Query Units

Unit Description Calculation Example Use Cases Browser Support
cqw Container query width 1% container width width: 50cqw कंटेनर बेस्ड रेस्पॉन्सिव डिज़ाइन आधुनिक ब्राउज़र्स
cqh Container query height 1% container height height: 80cqh कंटेनर बेस्ड लेआउट आधुनिक ब्राउज़र्स
cqi Container query inline 1% container inline size padding: 2cqi लॉजिकल कंटेनर लेआउट आधुनिक ब्राउज़र्स
cqb Container query block 1% container block size margin: 1cqb ब्लॉक-डायरेक्शन कंटेनर साइजिंग आधुनिक ब्राउज़र्स
cqmin Container query minimum 1% smaller container dimension font-size: 3cqmin कंटेनर टाइपोग्राफी आधुनिक ब्राउज़र्स
cqmax Container query maximum 1% larger container dimension border-radius: 2cqmax कंटेनर बेस्ड स्टाइलिंग आधुनिक ब्राउज़र्स

📊 Percentage Units

Unit Description Relative To Example Use Cases Browser Support
% Percentage Parent element property width: 50% फ्लेक्सिबल लेआउट, रेस्पॉन्सिव डिज़ाइन सभी ब्राउज़र्स

📊 Angle Units

Unit Description Conversion Example Use Cases Browser Support
deg Degrees 360deg = full circle transform: rotate(45deg) रोटेशन, ग्रेडिएंट सभी ब्राउज़र्स
grad Gradians 400grad = full circle transform: rotate(100grad) मैथमैटिकल कैलकुलेशन, ग्रेडिएंट सभी ब्राउज़र्स
rad Radians 2π rad = full circle transform: rotate(1.57rad) मैथमैटिकल ट्रांसफॉर्म सभी ब्राउज़र्स
turn Turns 1turn = full circle transform: rotate(0.25turn) इंट्यूटिव रोटेशन, एनिमेशन IE9+

📊 Time Units

Unit Description Conversion Example Use Cases Browser Support
s Seconds 1s = 1000ms transition-duration: 2s एनीमेशन, ट्रांज़िशन सभी ब्राउज़र्स
ms Milliseconds 1000ms = 1s animation-delay: 500ms प्रिसाइस टाइमिंग, फास्ट एनिमेशन सभी ब्राउज़र्स

📊 Frequency Units

Unit Description Conversion Example Use Cases Browser Support
Hz Hertz 1Hz = 1 cycle/sec Not commonly used in CSS Audio-related properties Limited
kHz Kilohertz 1kHz = 1000Hz Not commonly used in CSS Audio-related properties Limited

📊 Resolution Units

Unit Description Definition Example Use Cases Browser Support
dpi Dots per inch Physical dots per inch @media (min-resolution: 300dpi) High-DPI स्क्रीन, प्रिंट IE9+
dpcm Dots per cm Physical dots per cm @media (min-resolution: 118dpcm) मेट्रिक माप, प्रिंट IE9+
dppx Dots per px unit Device pixels per CSS pixel @media (min-resolution: 2dppx) Retina स्क्रीन IE9+
x Alias for dppx Same as dppx @media (min-resolution: 2x) Retina स्क्रीन आधुनिक ब्राउज़र्स

📊 Color Units

Unit Description Format Example Use Cases Browser Support
\# Hexadecimal #RRGGBB / #RGB color: #ff0000 स्टैंडर्ड कलर सभी ब्राउज़र्स
rgb() RGB function rgb(r,g,b) color: rgb(255,0,0) प्रिसाइस कलर कंट्रोल सभी ब्राउज़र्स
rgba() RGB with alpha rgba(r,g,b,a) background: rgba(255,0,0,0.5) ट्रांसपेरेंट कलर IE9+
hsl() HSL function hsl(h,s%,l%) color: hsl(0,100%,50%) इंट्यूटिव कलर IE9+
hsla() HSL with alpha hsla(h,s%,l%,a) background: hsla(0,100%,50%,0.5) ट्रांसपेरेंट HSL IE9+
hwb() HWB function hwb(h w% b%) color: hwb(0 0% 0%) अल्टरनेटिव कलर मॉडल आधुनिक ब्राउज़र्स
lab() Lab function lab(l a b) color: lab(50% 20 -30) Perceptual कलर स्पेस आधुनिक ब्राउज़र्स
lch() LCH function lch(l c h) color: lch(50% 40 180) Cylindrical Lab स्पेस आधुनिक ब्राउज़र्स
oklab() OKLab function oklab(l a b) color: oklab(0.5 0.2 -0.3) Improved Lab आधुनिक ब्राउज़र्स
oklch() OKLCH function oklch(l c h) color: oklch(0.5 0.4 180) Improved LCH आधुनिक ब्राउज़र्स
color() Color function color(space r g b) color: color(display-p3 1 0 0) Wide-Gamut कलर आधुनिक ब्राउज़र्स

📊 Function Units

Unit Description Calculation Example Use Cases Browser Support
calc() Mathematical calculation Combines different units width: calc(100% - 20px) मिश्रित यूनिट कैलकुलेशन IE9+
min() Minimum value Returns smallest value width: min(100px, 50%) Responsive constraint आधुनिक ब्राउज़र्स
max() Maximum value Returns largest value width: max(200px,50%) Responsive minimum आधुनिक ब्राउज़र्स
clamp() Clamped value clamp(min,preferred,max) font-size: clamp(1rem,4vw,2rem) Responsive लिमिटेड टाइपोग्राफी आधुनिक ब्राउज़र्स
attr() Attribute value Uses HTML attribute width: attr(data-width px) डायनामिक वैल्यू Limited support
var() CSS variable Uses custom property color: var(--main-color) कस्टम प्रॉपर्टीज़ IE11+ (partial), आधुनिक

📊 Grid Units

Unit Description Definition Example Use Cases Browser Support
fr Fraction unit Fraction of available space grid-template-columns: 1fr 2fr CSS Grid, flexible columns IE10+ (-ms-)

Code Example 15

css
CSS Code 
/* Absolute और relative यूनिट का मिश्रण */
.container {
width: calc(100vw - 2rem);
max-width: 1200px;
padding: 1em 5%;
}

/* Clamp के साथ responsive typography */
.heading {
font-size: clamp(1.5rem, 4vw, 3rem);
line-height: 1.2;
margin-bottom: 1em;
}

/* Full-screen layouts के लिए viewport यूनिट्स */
.hero {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
}

/* Container query यूनिट्स */
.card {
width: 100cqw;
padding: 2cqi;
font-size: clamp(0.875rem, 3cqw, 1.25rem);
}

/* CSS Grid fractional units */
.grid-layout {
display: grid;
grid-template-columns: 200px 1fr 2fr;
gap: 1rem;
}
  • स्केलेबल और एक्सेसिबल डिज़ाइन के लिए relative units (rem, em, %) का उपयोग करें।
  • पूरे डिज़ाइन में consistent spacing के लिए rem को em पर प्राथमिकता दें।
  • Viewport units (vw, vh) का ध्यानपूर्वक उपयोग करें क्योंकि ये scrollbars को काउंट नहीं करती।
  • Responsive typography के लिए clamp() का उपयोग करें।
  • Complex layouts में calc() के साथ यूनिट्स मिलाएं।
  • Borders, box-shadows और decorative elements के लिए px का उपयोग करें।
  • Container query units को समर्थित ब्राउज़र्स में टेस्ट करें।
  • CSS Grid में fr units flexible और intuitive लेआउट के लिए उपयोग करें।
  • नए units (dvh, lvh, svh) का उपयोग करते समय browser support ध्यान रखें।
  • International layouts के लिए logical units (vi, vb) का विचार करें।
  • HSL/HSB color units आसानी से color manipulation और theming के लिए।
  • पुराने ब्राउज़र्स में fallbacks दें।
  • विभिन्न devices और स्क्रीन साइज़ में यूनिट्स का परीक्षण करें।

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

Reference Knowledge Check

CSS यूनिट्स और उनके उपयोग का ज्ञान परखें।

❓
3
प्रश्न
🎯
70%
पास करने के लिए
♾️
∞
समय
🔄
∞
प्रयास

📝 निर्देश

  • हर प्रश्न को ध्यान से पढ़ें
  • हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
  • आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
  • आपकी प्रगति शीर्ष पर दिखाई जाएगी
विषय 62 का 65
Css ट्यूटोरियल