मोबाइल-फ़र्स्ट दृष्टिकोण, media queries, और rem, %, तथा vw इकाइयों के साथ अपने इंटरफ़ेस को हर स्क्रीन आकार के अनुकूल बनाएँ।
इस पाठ को Kodokon में खोलेंपेशेवर दृष्टिकोण मोबाइल-फ़र्स्ट है: आप पहले छोटी-स्क्रीन वाली स्टाइल लिखते हैं, फिर जगह बढ़ने के साथ min-width media queries का उपयोग करके लेआउट को बेहतर बनाते हैं। बेस CSS सरल बना रहता है, और हर ब्रेकपॉइंट केवल वही जोड़ता है जो वास्तव में बदलता है।
.cards {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 768px) {
.cards {
grid-template-columns: repeat(3, 1fr);
}
}जहाँ तक इकाइयों की बात है, टाइपोग्राफी के लिए पिक्सेल पर प्रतिबंध लगाएँ। 1rem, रूट एलिमेंट के फ़ॉन्ट आकार (डिफ़ॉल्ट रूप से 16px) के बराबर होता है और, सबसे बढ़कर, उपयोगकर्ता द्वारा अपने ब्राउज़र में चुनी गई टेक्स्ट आकार सेटिंग का सम्मान करता है। एक दृष्टिबाधित उपयोगकर्ता जो अपना फ़ॉन्ट 20px पर सेट करता है, वह आपकी पूरी साइट को उसी अनुपात में बढ़ते हुए देखेगा - बशर्ते आपने rem का उपयोग किया हो।
h1 {
font-size: 2.5rem;
}
p {
font-size: 1rem;
}
.section {
padding: 4rem 1.5rem;
}चौड़ाइयों के लिए, सापेक्ष इकाइयों को मिलाएँ: पैरेंट का एक हिस्सा लेने के लिए %, बड़ी स्क्रीन पर उसे सीमित करने के लिए max-width, viewport चौड़ाई से जुड़े आकारों के लिए vw (1vw, उसका 1% होता है)। clamp(min, ideal, max) फ़ंक्शन ऐसे तरल मान बनाता है जो बिना किसी media query के अनुकूल हो जाते हैं - बड़े शीर्षकों के लिए एकदम सही।
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.hero-title {
font-size: clamp(2rem, 5vw, 3.5rem);
}@media (max-width: 768px)@media (min-width: 768px)@media (device: desktop)1rem किसके बराबर होता है?50vw किसके बराबर होता है?