उत्तरदायी डिजाइन: किसी भी स्क्रीन आकार में एक पूर्ण स्क्रीन वर्ग को केंद्रीकृत

Question

समस्या सरल है:

• मेरे पृष्ठ का मुख्य हिस्सा एक वर्ग है कि सभी स्क्रीन आकार में स्क्रीन के बीच में दिखाया जाना चाहिए है और उन्मुखता
• वर्ग को स्क्रीन का कुशलतापूर्वक उपयोग करना चाहिए और
• स्क्रॉल करने की आवश्यकता के बिना जितना संभव हो उतना बड़ा होना चाहिए, कोई स्क्रॉलबार नहीं, कोई निश्चित आकार नहीं, कोई ओवरफ़्लो-छुपा नहीं, कोई जावास्क्रिप्ट नहीं है।
• फ्लेक्सबॉक्स को प्रोत्साहित किया जाता है।

यह पृष्ठ एक लैंडस्केप या पोर्ट्रेट ब्राउज़र में की तरह दिखना चाहिए कैसे:

यहाँ एक प्रारंभिक बिंदु के रूप में एक CodePen है।

<div class="body"> 
    <div class="square"> 
    Square 
    </div> 
</div> 

Answer 1

अंतिम लक्ष्य प्राप्त करने का मेरा प्रयास यहां है।

प्रमुख मुद्दा वर्ग बॉक्स के दोनों width और height संपत्तियों के लिए vmin viewport percentage length उपयोग करने के लिए है:

Example Here

.body, .square { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

.body { 
    min-height: 100vh; 
} 

.square { 
    width: 100vmin; 
    height: 100vmin; 
} 

(विक्रेता उपसर्गों संक्षिप्तता के लिए छोड़ा जाता है, जाँच "संकलित देखें" demo में)।