सीएसएस - प्रतिशत या पिक्सेल?

Question

मैं कई वर्षों से सीएसएस का उपयोग कर रहा हूं, और मैं हमेशा एक 'प्रतिशत' प्रकार का लड़का रहा हूं, क्योंकि मैं हमेशा पिक्सेल के विपरीत प्रतिशत का उपयोग करके ऊंचाई और चौड़ाई परिभाषित करता हूं (उदाहरण के लिए, उदाहरण के लिए, जैसे चीजों को सेट करना मार्जिन, पैडिंग, आदि, इस मामले में मैं पिक्सेल का उपयोग करता हूं)।

मैं कुछ इस तरह करना होगा:

body{ 
    height: 99%; 
    width: 99%; 
    margin-top: 10px; 
} 

लेकिन मैं अक्सर इस जैसे उदाहरण देखें:

body{ 
    height: 300px; 
    width: 250px; 
    margin-top: 10px; 
} 

मेरा प्रश्न यह है: वहाँ अन्य से अधिक एक का उपयोग करने के लिए किसी भी लाभ है कुल, और यदि हां, तो वे क्या हैं?

धन्यवाद।

मिक

Answer 1

मोबाइल वेबपृष्ठ। उस के लिए% रॉक। जैसा कि यह (स्पष्ट रूप से) सूट समायोजित करेगा।

हालांकि जब आप उदाहरण के लिए एक निश्चित चौड़ाई चाहते हैं तो पाठ का एक लेख जिसे आप किसी निश्चित तरीके से प्रदर्शित करना चाहते हैं, पीएक्स विजेता है।

दोनों आप वस्तुओं एक ही आकार कोई फर्क नहीं (जूमिंग या स्क्रीन आकार से प्रभावित नहीं) क्या है, तो पिक्सल होना चाहते हैं कई प्लस और माइनस एक दूसरे :)

Answer 2

से अधिक। ईएम का उपयोग करने में भी देख सकते हैं। मुझे लगता है कि ईएम मध्य में हैं, जहां वे ज़ूमिंग से प्रभावित होते हैं, लेकिन स्क्रीन आकार से नहीं।

Answer 3

कारण कसरत! किसी अन्य चीज़ के सापेक्ष तत्वों का आकार बदलने के लिए प्रतिशत चौड़ाई बहुत उपयोगी होती है (उदाहरण के लिए ब्राउज़र आकार)। आप अलग-अलग परिस्थितियों में फिट करने के लिए अपना पृष्ठ गतिशील रूप से बदल सकते हैं। दूसरी तरफ पिक्सल उपयोगी होते हैं जब आपको सटीक आकार की आवश्यकता होती है जो आपके ऊपर नहीं बदलेगी। कुछ लोग (उदा। मुझे) पिक्सल और पर्सेंट दोनों का उपयोग तत्वों को स्थिति में करने के लिए करते हैं कि आप उन्हें कैसे चाहते हैं। अन्य (उदा। मेरे अलावा अन्य लोग: पी) आपको बताएंगे कि यह बेवकूफ है।

Answer 4

मैं अपनी वेबसाइट पर पिक्सेल का उपयोग करता हूं और मैं अधिकतम चौड़ाई 1000px रखता हूं। मेरी वेबसाइट मेरी 11 "नेटबुक पर ठीक से प्रदर्शित करता है मोबाइल उपकरणों के साथ बहुत अच्छी तरह से काम नहीं करता, तथापि, लेकिन यह है कि यह क्या है के लिए है:

<link rel="stylesheet" href="/styles/mobile.css" media="handheld" /> 

मैं प्रतिशत बहुत समय गहन में वेबसाइटों को विकसित करने पाते हैं, पर विचार करने के लिए सभी को फिर होने जैसे -sizing घटनाओं,:

overflow:scroll; 

पिक्सल और प्रतिशत दोनों अपने भत्ते है, लेकिन मैं कहूँगा कि पिक्सल परिशुद्धता, विश्वसनीयता की वजह से एक बेहतर विकल्प हो सकता है, और विकसित करने के लिए आसान है इसके अलावा एक और बात पर विचार करना। फोंट के लिए पिक्सल और प्रतिशत हैं। अंगूठे का मेरा नियम यहां है:

• यदि आप प्रतिशत के साथ वेबसाइट विकसित कर रहे हैं, तो अनुपात को सही रखने के कारणों के लिए फ़ॉन्ट के प्रतिशत का उपयोग करें।
• यदि आप पिक्सल वाली वेबसाइट विकसित कर रहे हैं, तो फ़ॉन्ट के लिए पिक्सेल का उपयोग करें।

यदि आपके पास ऐसे लोग हैं जिन्हें फ़ॉन्ट को बड़ा करने की आवश्यकता हो सकती है तो फ़ॉन्ट के प्रतिशत का उपयोग करना हमेशा बेहतर होता है।

Answer 5

% वेक्टर ग्राफिक्स की तरह आधुनिक दुनिया में जाने का तरीका हैं। जैसे-जैसे स्क्रीन बड़ी या छोटी होती है, आप संकल्प के बावजूद ठीक से स्केल कर सकते हैं।

Answer 6

स्पष्ट रूप से कोई अधिकार या गलत नहीं है। इसकी बजाय तरलता का मामला है।

पिक्सेल के साथ एक दूसरे के सापेक्ष वस्तुओं को स्थानांतरित करना और सटीक ऊंचाई और चौड़ाई को नियंत्रित करना आसान है।

स्केलिंग ऑब्जेक्ट्स दूसरी तरफ प्रतिशत के साथ आसान है। खिड़की की चौड़ाई का 50% हमेशा खिड़की का आधा होगा चाहे स्क्रीन आकार चाहे।

Answer 7

भीतरी शैली शीर्ष संपत्ति में % में है के रूप में 200px*0.3=60px

#outer{ 
 
    border-style: dotted; 
 
    position: relative; 
 
    height: 200px; 
 
} 
 
#inner{ 
 
border-style: double; 
 
    position: absolute; 
 
    top: 30%; <<<<<<<<<<<<<< 
 
}

<div id="outer"> 
 
outer 
 
<div id="inner"> 
 
inner 
 
</div> 
 
</div>

यहाँ शीर्ष 30px है तो यह गणना होती है। तो यह वैसे ही होगा।

#outer{ 
 
    border-style: dotted; 
 
    position: relative; 
 
    height: 200px; 
 
} 
 
#inner{ 
 
border-style: double; 
 
    position: absolute; 
 
    top: 30px; <<<<<<<<<<<< 
 
}

<div id="outer"> 
 
outer 
 
<div id="inner"> 
 
inner 
 
</div> 
 
</div>

Answer 8

उपयोग दोनों = डी

आप के साथ हमेशा का उपयोग कर गठजोड़ कर सकते हैं दोनों आप इसके बारे में उलझन में)

calc() सरल करने के लिए एक देशी सीएसएस रास्ता है कर रहे हैं किसी भी लंबाई मान (या बहुत अधिक संख्या मूल्य) के प्रतिस्थापन के रूप में सीएसएस में गणित सही है।

यह चार सरल गणित ऑपरेटरों हैं: add (+), subtract (-), multiply (*), और divide (/)।

.my-class { 
    widht: calc(100% - 20px); 
    height: calc(50% + 10px); 
} 

ब्राउज़र समर्थन आश्चर्यजनक रूप से अच्छा है। Can I use...

उपयोगी पढ़ने: CSS-Tricks

Answer 9

मैं भी प्रतिशत पसंद है, लेकिन कुछ मामलों में यह मैं क्या उम्मीद नहीं करता है। उदाहरण के लिए यदि मेरे पास अधिकतम पंक्ति के साथ समान पंक्ति साझा करने वाले दो बटन हैं: 50%, और वर्तमान व्यूपोर्ट भी एक संख्या नहीं है, उनमें से एक हमेशा ध्यान से थोड़ा बड़ा होगा।