सीएसएस मीडिया क्वेरी ब्राउज़र के बजाय एचटीएमएल दस्तावेज़ के एम आकार का उपयोग करें?

Question

मैं खिड़की की चौड़ाई के आधार पर भाग में तत्व की चौड़ाई बदलने के लिए मीडिया प्रश्नों का उपयोग करने की कोशिश कर रहा हूं (इससे मुझे स्तंभों की चौड़ाई के बिना पृष्ठ पर स्तंभों की संख्या में वृद्धि करने की अनुमति मिलती है)। मैं इसे पिक्सेल के बजाय एम का उपयोग करके ऐसा करने में सक्षम होना चाहता हूं ताकि यदि आप अपना फ़ॉन्ट आकार बदलते हैं तो सब ठीक दिखाई देगा। हालांकि, अगर मैं निम्नलिखित का उपयोग करें:

html { 
    font-size: 12px; /* you could also use 75% if you want to be percent based.*/ 
} 

@media screen and (min-width: 42em) { 
    div#page { 
     width: 42em; 
    } 
} 

मीडिया क्वेरी, जब विंडो के न्यूनतम चौड़ाई तक पहुँच जाता है 42 * 16px, अपने ब्राउज़र (सफारी) के लिए डिफ़ॉल्ट फ़ॉन्ट आकार को ट्रिगर किया जाएगा, जबकि div # की चौड़ाई पेज 42 * 12 पीएक्स होगा, एचटीएमएल तत्व से फ़ॉन्ट आकार विरासत में होगा। मैं वास्तव में मीडिया के प्रश्नों को उस पाठ की चौड़ाई के आधार पर ट्रिगर करना चाहता हूं जिसका उपयोग मैं कर रहा हूं, क्या यह काम करने का कोई तरीका है?

Answer 1

देखें नहीं, आप क्योंकि एक मीडिया क्वेरी में, "मीडिया के प्रश्नों में सापेक्ष इकाइयों प्रारंभिक मूल्य है, जो कि इकाइयों घोषणाओं के परिणामों के आधार पर कभी नहीं कर रहे हैं मतलब है पर आधारित हैं, नहीं कर सकता। उदाहरण के लिए, एचटीएमएल में, 'em' इकाई 'फ़ॉन्ट-आकार' के प्रारंभिक मान से संबंधित है। "(मीडिया क्वेरी स्पेक, क्लॉज 6 Units)। font-size का प्रारंभिक मान medium है, जो एक ब्राउज़र-निर्भर तरीके से भौतिक आकार के लिए मैप किया गया है (स्वतंत्र रूप से किसी भी चीज जिसे आप सीएसएस में सेट कर सकते हैं)।

निष्कर्ष इस बात पर निर्भर करते हैं कि आप फ़ॉन्ट आकार कैसे सेट करते हैं। यदि आप मूल तत्व के फ़ॉन्ट आकार को पिक्सल में सेट कर रहे हैं, तो मीडिया क्वेरी में पिक्सल का उपयोग करना तार्किक है, क्योंकि em का उपयोग कोई लचीलापन प्रदान नहीं करेगा। यदि आप मूल तत्व के फ़ॉन्ट आकार को प्रतिशत के रूप में सेट करते हैं, तो मीडिया क्वेरी में em का उपयोग करना समझ में आता है, लेकिन आपको केवल यह ध्यान रखना होगा कि em का अर्थ है ब्राउज़र का डिफ़ॉल्ट फ़ॉन्ट आकार और आपको em के गुणक का चयन करना होगा।

Answer 2

W3C से (http://www.w3.org/TR/CSS21/syndata.html)
उन्हें 'इकाई' font-size 'पर तत्व की संपत्ति की गणना मूल्य के बराबर है जिसका उपयोग किया जाता है। अपवाद है जब 'em' 'font-size' संपत्ति के मूल्य में होता है, जिस स्थिति में यह मूल तत्व के फ़ॉन्ट आकार को संदर्भित करता है।

html { font-size:1em; width:42em; } 
body { font-size:1.6em; } 

@media screen and (max-width:40em) { 
    div#page { font-size:0.875em; } /* 14px font */ 
} 

नोट: 42em शायद ब्राउज़र विंडो की चौड़ाई का 100% कभी नहीं होगा। यदि आप अलग-अलग स्क्रीन चौड़ाई (max-width:1200px), (max-width:1024px) के लिए अलग-अलग कार्य करने के लिए @media को बदलते हैं, तो आपको संभवतः अधिक प्रभाव मिलेगा जो मुझे लगता है कि आप बाद में हैं।

Answer 3

मैं अभी भी वही चीज़ देख रहा हूं, और AFAIK ब्राउज़र/डिवाइस के "मूल" फ़ॉन्ट आकार को बदलने का कोई तरीका नहीं है; लेकिन यह वास्तव में अच्छा है अगर आप इसे एक निश्चित तरीके से देखते हैं।

मीडिया-क्वेरी और एचटीएमएल टैग - जो संबंधित इकाइयों में सेट है - किसी दिए गए डिवाइस या ब्राउज़र पर समान आधार संख्या का जिक्र कर रहे हैं (डेस्कटॉप ब्राउज़र के मामले में यह 16 पीएक्स है, लेकिन यह अलग हो सकता है अन्य डिवाइस या यदि उपयोगकर्ता अपना ज़ूम बदलता है)।

तो यदि आप अपने एचटीएमएल टेक्स्ट-साइज को इस मान के प्रतिशत या एम-माप में सेट करते हैं (12px के समतुल्य डेस्कटॉप के लिए, 75% या 0.75em का उपयोग करें), और फिर पिक्सेल को विभाजित करने के आधार पर अपने मीडिया प्रश्न सेट करें इस मान से चौड़ाई (960px के डेस्कटॉप समकक्ष के लिए, 60em का उपयोग करें), प्रत्येक ज़ूम स्तर पर प्रत्येक डिवाइस पर सबकुछ डालना चाहिए।

भी इस link