सीएसएस स्क्रीन रिज़ॉल्यूशन की ऊंचाई प्राप्त करें

Question

मुझे निचले स्क्रीन रिज़ॉल्यूशन की ऊंचाई प्राप्त करने में कठिनाई हो रही है क्योंकि मेरा स्क्रीन रेज़ोल्यूशन 1920x1080 है क्या किसी को भी ऊंचाई और चौड़ाई स्क्रीन रिज़ॉल्यूशन प्राप्त करने का तरीका पता है? क्योंकि मेरे दोस्त के पास 1024x768 रिज़ॉल्यूशन है जब उसने अपने कंप्यूटर में अपना काम चेक किया है, यह सब गड़बड़ है, यह सीएसएस की ऊंचाई और चौड़ाई के लिए मेरी एकमात्र समस्या है।

Answer 1

सीएसएस से स्क्रीन की ऊंचाई प्राप्त करना संभव नहीं है। हालांकि, CSS3 के बाद से आप संकल्प के अनुसार टेम्पलेट के प्रदर्शन को नियंत्रित करने के लिए media queries का उपयोग कर सकते हैं।

यदि आप मीडिया प्रश्नों का उपयोग करके ऊंचाई के आधार पर कोड करना चाहते हैं, तो आप स्टाइल शीट को परिभाषित कर सकते हैं और इसे इस तरह कॉल कर सकते हैं।

<link rel="stylesheet" media="screen and (device-height: 600px)" /> 

Answer 2

स्क्रीन रिज़ॉल्यूशन प्राप्त करने के लिए आप jquery का भी उपयोग कर सकते हैं। यह link आपको हल करने में बहुत मदद करता है।

Answer 3

प्रतिशत में ऊंचाई और चौड़ाई का उपयोग करें।

उदाहरण के लिए:

width: 80%; 
height: 80%; 

Answer 4

आप व्यूपोर्ट-प्रतिशत lenghts इस्तेमाल कर सकते हैं।

देखें: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

यह इस तरह काम करता है:

.element{ 
    height: 100vh; /* For 100% screen height */ 
    width: 100vw; /* For 100% screen width */ 
} 

अधिक भी जानकारी उपलब्ध Mozilla Developer Network और W3C के माध्यम से।

Answer 5

प्राप्त करने के लिए स्क्रीन रिज़ॉल्यूशन उपयोग सीएसएस के बजाय जावास्क्रिप्ट का उपयोग करना चाहिए: उपयोग ऊंचाई के लिए screen.height और चौड़ाई के लिए screen.width।

Answer 6

आपको वास्तव में स्क्रीन रिज़ॉल्यूशन की आवश्यकता नहीं है, जो आप चाहते हैं ब्राउज़र के आयाम हैं क्योंकि कई मामलों में ब्राउज़र खिड़कीदार है, और यहां तक ​​कि अधिकतम आकार में ब्राउज़र स्क्रीन का 100% नहीं लेगा।

<div style="height: 50vh;width: 25vw"></div> 

इस आंतरिक ब्राउज़र की ऊंचाई का 50% और इसकी चौड़ाई के 25% के साथ एक div प्रस्तुत करना होगा:

क्या आप चाहते हैं दृश्य पोर्ट-ऊंचाई देखें पोर्ट-चौड़ाई है।

Answer 7

आप वर्तमान ऊंचाई स्क्रीन की चौड़ाई बाध्य कर सकते हैं (ईमानदार इस जवाब @Hendrik_Eichler क्या कहना चाहता था का हिस्सा था, लेकिन वह केवल एक लिंक दिया और इस मुद्दे को सीधे संबोधित नहीं करता है) सीएसएस चर रहे हैं: var(--screen-x) और var(--screen-y) इस जावास्क्रिप्ट के साथ: https://leaverou.github.io/css-variables/#slide31

Answer 8

आप हवा प्राप्त कर सकते हैं:

var root = document.documentElement; 

document.addEventListener('resize',() => { 
    root.style.setProperty('--screen-x', window.screenX) 
    root.style.setProperty('--screen-y', window.screenY) 
}) 

यह सीधे सीएसएस चर यहां पर उसकी बात में ली वेरोऊ के उदाहरण से अनुकूलित किया गया था इकाइयों "वीएच" का उपयोग करते हुए शुद्ध सीएसएस में ओउ ऊंचाई काफी आसानी से, प्रत्येक खिड़की की ऊंचाई के 1% से संबंधित है। नीचे दिए गए उदाहरण पर, स्क्रीन के मार्जिन-टॉप आधे आकार को जोड़कर block.foo को केंद्रीकृत करना शुरू करें।

.foo{ 
    margin-top: 50vh; 
} 

लेकिन यह केवल 'विंडो' आकार के लिए काम करता है। जावास्क्रिप्ट के एक डब के साथ, आप इसे अधिक बहुमुखी बना सकते हैं।

$(':root').css("--windowHeight", $(window).height()); 

वह कोड "- विन्डोहेइट" नामक एक सीएसएस वैरिएबल बनाएगा जो खिड़की की ऊंचाई रखता है। इसके इस्तेमाल के लिये सिर्फ नियम जोड़ने:

.foo{ 
    margin-top: calc(var(--windowHeight)/2); 
} 

और क्यों यह बस "VH" इकाइयों का उपयोग करने से अधिक बहुमुखी है? क्योंकि आप किसी भी तत्व की ऊंचाई प्राप्त कर सकते हैं। अब अगर आप किसी भी container.bar में एक block.foo केंद्रीकृत करने के लिए चाहते हैं आप:

$(':root').css("--containerHeight", $(.bar).height()); 
$(':root').css("--blockHeight", $(.foo).height()); 

.foo{ 
    margin-top: calc(var(--containerHeight)/2 - var(--blockHeight)/2); 
} 

और अंत में, यह विंडो आकार पर परिवर्तन करने के लिए प्रतिक्रिया करने के लिए, आप (इस उदाहरण में इस्तेमाल कर सकते हैं, कंटेनर 50% खिड़की ऊंचाई) है:

$(window).resize(function() { 
    $(':root').css("--containerHeight", $(.bar).height()*0.5); 
});