स्क्रीन जानकारी

DPR प्रति CSS पिक्सेल भौतिक पिक्सेलों की संख्या है। 2 का DPR एक Retina डिस्प्ले को दर्शाता है, जिसका अर्थ है कि शार्प प्रदर्शन के लिए इमेज 2x बड़ी होनी चाहिए।

स्क्रीन रिज़ॉल्यूशन आपके मॉनिटर के कुल भौतिक पिक्सेल हैं, जबकि व्यूपोर्ट वह क्षेत्र है जहाँ ब्राउज़र में सामग्री प्रदर्शित होती है, टूलबार और स्क्रॉलबार को छोड़कर।

ब्रेकपॉइंट को किसी ख़ास डिवाइस के नाम से बाँधना यह पक्का कर देता है कि नया डिवाइस आते ही वे टूट जाएँगे। इसके बजाय वहीं काटिए जहाँ लेआउट ख़ुद बिगड़ने लगता है। व्यवहार में 480, 768, 1024 और 1280 पिक्सेल आम शुरुआती बिंदु हैं, पर ये याद रखने में आसान संख्याएँ हैं, नियम नहीं। ब्राउज़र विंडो को धीरे-धीरे सँकरा कीजिए और देखिए किस चौड़ाई पर पंक्तियाँ बहुत लंबी हो जाती हैं या कार्ड दब जाता है; ब्रेकपॉइंट वहीं रखना कहीं ज़्यादा टिकाऊ है।

क्योंकि CSS पिक्सेल दिखाई देने वाले आकार की इकाई है, कोई भौतिक बिंदु नहीं। 4K स्क्रीन पर 200% स्केलिंग रखने पर 3840 भौतिक बिंदु CSS के हिसाब से 1920 पिक्सेल के रूप में प्रस्तुत होते हैं, और इसी वजह से पाठ तथा आइकन अधिक सघन और साफ़ दिखते हैं। तब डिवाइस पिक्सेल अनुपात 2 हो जाता है, इसलिए तस्वीरें कुरकुरी रखने के लिए srcset से प्रदर्शित आकार से दोगुने रिज़ॉल्यूशन की फ़ाइल भी देनी पड़ती है।