व्यूपोर्ट

Question

के साथ एक वेब लेआउट स्केलिंग मैं सीएसएस 3 इकाइयों vw, vh और vm से अवगत हूं, जो ब्राउज़र के व्यूपोर्ट आकार के सापेक्ष उनके बॉक्स आकार और टेक्स्ट आकार वाले तत्व बनाने के लिए उपयोगी प्रतीत होते हैं। हालांकि, दुख की बात है, ये वर्तमान प्रमुख ब्राउज़रों के साथ अच्छी तरह से समर्थित नहीं हैं; केवल इंटरनेट एक्सप्लोरर 9 + करता है।

सीएसएस font-size जैसी चीजें करने के लिए मैं किन तरीकों का उपयोग कर सकता हूं जो व्यूपोर्ट के साथ स्केल करते हैं? यदि संभव हो तो मैं जावास्क्रिप्ट और/या jQuery समाधान से बचना चाहता हूं।

Answer 1

100% स्केलेबल वेबसाइट करना संभव है। जैसा कि रेव ने कहा, आप प्रतिशत मानों का उपयोग कर ऐसा कर सकते हैं, लेकिन यह मुश्किल है।

बेहतर विकल्प @media queries का उपयोग करना है। ये आपको कुछ शर्तों के तहत पृष्ठ केवल पर सीएसएस नियम लागू करने की अनुमति देते हैं। डिवाइस चौड़ाई और/या पृष्ठ की चौड़ाई का पता लगाने के लिए मीडिया प्रश्नों का उपयोग करके, आप अलग-अलग व्यूपोर्ट आकारों पर आपकी साइट को कैसा दिखते हैं, इस पर ठीक ट्यून नियंत्रण लागू कर सकते हैं। उदाहरण के लिए:

@media screen and (max-device-width: 960px) { 
    font-size:14px; 
} 
@media screen and (max-device-width: 480px) { 
    font-size:13px; 
} 

अब, उपरोक्त उदाहरण अपेक्षाकृत मामूली और contrved है। मीडिया प्रश्नों के साथ आप जो कर सकते हैं उसकी गहरी समझ के लिए, मैं आपको W3C spec page देखने की सलाह देता हूं। सबसे शक्तिशाली कुछ width, min-device-width, max-device-width, portrait|landscape, और print क्वेरी हैं।

एक साइड नोट के रूप में, इन शैलियों को अपने सीएसएस के नीचे शामिल करना सुनिश्चित करें, ताकि वे डिफ़ॉल्ट शैलियों द्वारा अधिलेखित न हों।