प्रतिशत के बजाय CSS में पिक्सेल संख्याओं का उपयोग करने के लिए संगतता के मामले में यह बुरा है? कम संकल्प के बारे में कैसे? 1-100 की रेंज में उनके साथ काम करना ठीक है?
जवाबों:
यह एक कठिन सवाल है, क्योंकि उत्तर ज्यादातर आपकी स्थिति पर निर्भर करता है।
पिक्सेल उस बुरे नहीं हैं, मैं ज्यादातर उनका उपयोग करता हूं। (कभी-कभी फ़ॉन्ट आकारों के लिए भी।)
मैं आमतौर पर किसी दिए गए आकार (निश्चित-चौड़ाई लेआउट वाले पिक्सेल, और तरल पदार्थ लेआउट के साथ प्रतिशत) द्वारा लेआउट के बाहरी ब्लॉक तत्व को ठीक करता हूं, और अंदर के तत्वों पर मैं आमतौर पर जब भी संभव हो प्रतिशत सेट करता हूं।
ऐसे कुछ तत्व हैं, जिन्हें केवल प्रतिशत या emएस के साथ स्टाइल नहीं किया जा सकता है , विशेष रूप से ग्राफिकल डिजाइनरों से आने वाले अधिक फैंसी सामान जो इस तरह के सिद्धांतों को नहीं समझते हैं।
उदाहरण के लिए: यदि आपकी साइट पर एक साधारण शैली के साथ एक कॉलम है, तो आप इसकी चौड़ाई को प्रतिशत में आसानी से सेट कर सकते हैं, लेकिन यदि इसकी पृष्ठभूमि की छवि एक विशिष्ट चौड़ाई के साथ है, जिसे ध्यान में रखते हुए नहीं बनाया गया है, तो यह केवल अच्छा दिखता है निश्चित-चौड़ाई के साथ। ऐसे मामलों में, आपको यह सुनिश्चित करना होगा कि शेष पृष्ठ शेष चौड़ाई को सही ढंग से रखता है।
ध्यान दें कि आप एक साथ प्रतिशत के साथ पिक्सेल का उपयोग कर सकते हैं।
उदाहरण के लिए, यह मेरे नवीनतम वेब ऐप्स में से एक स्निपेट है:
min-width: 800px;
width: 80%;
max-width: 1500px;
चुनाव इस बात पर भी निर्भर करता है कि आप किस डिज़ाइन या लेआउट को प्राप्त करना चाहते हैं।
एक के लिए निश्चित-चौड़ाई लेआउट, पिक्सेल मान ठीक कर रहे हैं। यदि एक डिजाइनर आपको एक फ़ोटोशॉप छवि देता है जिसमें वास्तव में फैंसी सामान होता है जो यह सोचने के लिए बेहद जटिल होगा कि यह कैसे आकार देगा, तो आपको इसके लिए निश्चित रूप से जाना चाहिए।
यदि आपके लेआउट को गतिशील होने की आवश्यकता है , तो आपको यह सुनिश्चित करने के लिए प्रतिशत का उपयोग करना चाहिए कि यह रिज़ॉल्यूशन में परिवर्तन के रूप में फैलता है, और आप उपरोक्त कोड स्निपेट का उपयोग करके इसे परिदृश्यों में बेहतर बना सकते हैं जहां यह अन्यथा पागल दिखाई देगा।
कुछ लेआउट (जैसे। कल्पना करें कि यदि StackOverflow सभी जगह ले लेगा) तो उदाहरण की चौड़ाई पर बहुत बदसूरत दिखेंगे। 1920 पिक्सल - लाइन की चौड़ाई इतनी अधिक होगी कि इसे पढ़ना बेहद असम्भव होगा।
यह वही max-widthहै जिसके लिए है कुछ गतिशील लेआउट में भी, आपको प्रयोज्य और पठनीयता को अधिकतम करने के लिए अपनी साइट की अधिकतम चौड़ाई को सीमित करना होगा।
और छोटे स्क्रीन पर भी ध्यान दें।
यह सच है कि कोई भी अब 800 × 600 डेस्कटॉप का उपयोग नहीं करता है, लेकिन बहुत से लोग मोबाइल उपकरणों के साथ वेब ब्राउज़ करते हैं जिनके पास छोटे संकल्प भी होते हैं।
यह वही min-widthहै जो आपके लिए: गतिशील रूप से विस्तारित लेआउट बनाने के लिए छोटे पुनर्जीवन पर कम भीड़ लग रही है।
आशा है कि ये आपकी मदद करेगा।
संपादित करें:
स्मैशिंग बुक विषय के बारे में कुछ बहुत अच्छा विचार है।
संपादित करें 2:
मैं नहीं चाहता कि मेरी पोस्ट आपको अच्छी लगे जैसे मैं चाहता हूं कि आप अपने दर्शकों पर पिक्सेल-आधारित आकार देने के लिए मजबूर करें।
(जाहिर है, टिप्पणियों में कुछ लोगों ने मुझे इस तरह से गलत समझा।)
इसे साफ़ करने के लिए:
मेरा मानना है कि आदर्श लेआउट वह है जो किसी भी संभावित रिज़ॉल्यूशन या सेटिंग को अच्छी तरह से समायोजित करता है।
हालाँकि, हम हमेशा सब कुछ पूरी तरह से नहीं कर सकते हैं। समय / संसाधन और लक्षित दर्शक यह निर्धारित करने के लिए महत्वपूर्ण हैं कि आपकी साइट को उन्नत कार्यक्षमता की आवश्यकता है या नहीं।
मैं सुझाव दे रहा हूं कि आप दिए गए काम के लिए सही चीज़ का उपयोग करें।
यदि आप एक ऐसी साइट विकसित कर रहे हैं जिसमें उन आगंतुकों का एक महत्वपूर्ण प्रतिशत होगा जिन्हें साइट पर अधिक उन्नत समायोजन की आवश्यकता होती है, तो यह अच्छी तरह से लायक हो सकता है।
(बेशक, कभी-कभी हम सिर्फ चीजों को सही तरीके से करने की भावना रखते हैं, लेकिन यह हमेशा आर्थिक रूप से सही फैसला नहीं होता है।)
फिर भी, आपको इस बारे में उचित शोध करना चाहिए कि किस तरह की साइट होगी, जो आगंतुक के बारे में होगी, और इस तरह के सामान, लेआउट के बारे में निर्णय लेने से पहले, और क्या यह उन्हें तरल या अधिक गतिशील बनाने के लिए समय के लायक है।
सभी मापों के अपने उद्देश्य होते हैं:
बॉर्डर जैसी पिक्सेल-आधारित चीज़ों के लिए पिक्सेल का उपयोग करें । आप शायद ऐसा बॉर्डर नहीं चाहते जो 1.3422 पिक्सल चौड़ा हो।
पाठ-आधारित चीज़ों के लिए पाठ-केंद्रित उपायों (उन्हें, पूर्व) का उपयोग करें , जैसे सामग्री क्षेत्र, लेबल और इनपुट बॉक्स। यह सुनिश्चित करने का एक आसान तरीका है कि आपके पास एक निश्चित लंबाई और चौड़ाई के पाठ के लिए जगह है।
स्तंभ जैसी विंडो-आधारित चीज़ों के लिए पर्केंट्स का उपयोग करें ।
अवश्य ही ये अपवाद हैं। उदाहरण के लिए, आप पिक्सेल में न्यूनतम कॉलम चौड़ाई निर्दिष्ट करना चाह सकते हैं। लेकिन ऊपर का पालन करें और आपके पृष्ठ अच्छी तरह से पैमाने पर होंगे। हमेशा अपने पन्नों पर ज़ूम इन और आउट करके देखें कि वे विभिन्न फ़ॉन्ट आकारों और ब्राउज़र आकृतियों के साथ कैसे काम करते हैं - बाद में आश्चर्य नहीं करें।
मुझे लगता है कि आपको पहले उन मुद्दों को समझना चाहिए जो CSS में पिक्सेल के साथ काम करते हैं:
emऔर अन्य रिश्तेदार आकार हैं, तो आप इसे बदलने वाले उपयोगकर्ताओं के निर्णय का सम्मान करेंगे । यह पाठ भारी साइटों पर विशेष रूप से महत्वपूर्ण है, खासकर अगर अधिक पुराने उपयोगकर्ता हैं। दूसरी ओर, अगर किसी साइट का डिज़ाइन महत्वपूर्ण है, तो मुझे लगता है कि pxप्रयोज्य को तोड़े बिना फ़ॉन्ट आकार निर्दिष्ट करने के लिए उपयोग करना संभव और न्यायोचित है ।अंत में, आपको निर्णय स्वयं करने की आवश्यकता है, और यह सटीक परिस्थितियों पर निर्भर करता है, लेकिन मुझे लगता है कि पिक्सल में फ़ॉन्ट आकार निर्दिष्ट करना ठीक है ।
वैसे, जब emफ़ॉन्ट आकार निर्दिष्ट करने के साथ काम करना सेट करना एक अच्छा विचार हैbody है font-size: 62.5%। इसका मतलब है कि आधार फ़ॉन्ट का आकार 10px है, इसलिए 1em 10px है, 1.6em 16px है और इसी तरह, ईएमएस का उपयोग करते हुए डिज़ाइन करने के दौरान पिक्सेल में सोचना आसान है । मुझे अभी भी इस तरह से काम करने में निराशा होती है, खासकर जब ईमेस कैस्केड के मान। PXtoEM.com जैसी कुछ बहुत ही आसान साइटें हैं जो इसकी मदद करती हैं।
स्क्रीन एक पिक्सेल आधारित लेआउट है , इसलिए पिक्सेल कई चीजों के लिए एक सहज विकल्प हैं। यहां मुख्य मुद्दा यह है कि विभिन्न उपयोगकर्ताओं के अलग-अलग स्क्रीन आकार हैं । जैसा कि अन्य लोगों ने बताया है, प्रतिशत के साथ-साथ पिक्सेल का उपयोग करना min-widthऔर स्क्रीन के आकार का सम्मान करने के लिए एक उपयोगी तरीका है, जबकि आपकी साइट को अनुचित रूप से स्क्वीज़ करने या बहुत छोटी और बहुत बड़ी खिड़कियों पर फैलने से रोकता है।max-widthwidth
हालाँकि, मैं आमतौर पर सीएसएस मीडिया प्रश्नों के पक्ष में इस दृष्टिकोण से बचता हूँ । स्क्रीन आकार बढ़ने के बाद आप फ़िक्स्ड फ़िक्स्ड चंक्स का उपयोग कर सकते हैं और लेआउट को व्यापक (अन्य चीज़ों के बीच) कर सकते हैं। हालाँकि, सभी शांत वेब तकनीकों की तरह CSS मीडिया क्वेरीज़, ब्राउज़र समर्थन की कमी से ग्रस्त है। सबसे विशेष रूप से, IE8 और पहले उनका समर्थन नहीं करते हैं, हालांकि जावास्क्रिप्ट फिक्स हैं। दूसरी ओर, iPhone और अन्य हैंडहेल्ड डिवाइस उनका समर्थन करते हैं, और अगर आप चाहते हैं कि आपकी साइट इन उपकरणों के लिए अच्छी दिखे, तो मैं उन्हें दृढ़ता से सलाह दूंगा।
मुझे लगता है कि निश्चित चौड़ाई वाले ग्रिड ठीक हैं । 960 ग्रिड सिस्टम की तरह निश्चित चौड़ाई ग्रिड सिस्टम अपने आप में काफी लोकप्रिय हैं, और कई अन्य साइटें हैं जिनकी एक निश्चित चौड़ाई है, मुझे संदेह है कि अगर आपने ऐसा किया तो आपको कई शिकायतें सुनाई देंगी। हैंडहेल्ड डिवाइस जिनके पास बड़ी स्क्रीन नहीं है, एक मुद्दा है, लेकिन यह वह जगह है जहां सीएसएस मीडिया प्रश्नों का उपयोग किया जाना चाहिए, इसलिए पिक्सल में और आईफोन पर आपकी साइट सुंदर दिखना संभव है ।
अंततः, सब कुछ इस बात पर निर्भर करता है कि आपके उपयोगकर्ता कौन हैं, आपको किसका समर्थन करने की आवश्यकता है, और आप क्या चाहते हैं कि आपकी साइट कैसी दिखे, लेकिन सीएसएस में पिक्सेल का उपयोग करने में स्वाभाविक रूप से कुछ भी गलत नहीं है ।
यह इस बात पर निर्भर करता है कि आप क्या स्टाइल कर रहे हैं। उदाहरण के लिए कॉलम के लिए, चौड़ाई को पाठ के आकार पर निर्भर करना चाहिए ताकि यह सुनिश्चित हो सके कि यह कई प्रस्तावों / स्क्रीन पर इष्टतम दिखाई देगा। यदि आप अपने पृष्ठ को दो भागों में विभाजित करना चाहते हैं, तो आपको प्रतिशत का उपयोग करना चाहिए। लेकिन अगर आप इन दो हिस्सों के बीच 1px सीमा चाहते हैं, तो रिज़ॉल्यूशन से स्वतंत्र, पिक्सल का उपयोग करें।
मूल रूप से यह इस बात पर निर्भर करता है कि आपको कौन काम पर रखता है और फलस्वरूप आपके काम के दर्शक। संस्थागत उद्देश्यों के लिए (जहां सामग्री को एक शासन परियोजना की तरह आकार देना चाहिए), आप .em या% के साथ बेहतर काम करते हैं, वे नियंत्रण के लिए कठिन हैं, लेकिन वे पहुंच के मामले में वास्तव में उपयोगकर्ता के अनुकूल होंगे।
यदि हम कॉर्पोरेट वेबसाइट (जहां आकार सौदा है) के बारे में बात करते हैं, तो पिक्सेल आपके ब्रांड के बारे में आपके ग्राहक की अपेक्षा को पूरा करने के लिए एक अधिक सटीक उपकरण होगा। एक तरल इंटरफ़ेस (% .em) हमेशा एक अच्छा सामान होता है जब यह चालाकी से किया जाता है, लेकिन चरम परिस्थितियों में अपने डिजाइन की जांच करना न भूलें और सुनिश्चित करें कि यह स्थिर होगा।
यदि आप पिक्सेल के साथ काम करते हैं, तो आपको अपनी साइट के अंतिम रूप पर पूर्ण नियंत्रण होगा, लेकिन आपको कुछ उपयोगकर्ताओं के लिए कुशलता से संचालित करने के लिए असंभवता का अनुमान लगाना होगा।
सबसे अच्छा विकल्प: सभी प्लेटफार्मों के लिए एक वेबसाइट के अनुकूल डिज़ाइन करने के बजाय (क्या एक बहु-कमी वाले डिजाइन में परिणाम होगा) अपने ग्राहकों को हर मांग के लिए अनुकूलित साइट के विशेष संस्करणों का सुझाव दें, जो एक बेहतर अभ्यास है और एक डिजाइनर के लिए एक बेहतर व्यवसाय भी है। ..
मैं कहूंगा कि अगर कुछ मामलों को छोड़कर संभव हो तो इसे टाल दें।
उदाहरण के लिए एक पतली सीमा के लिए यह सिर्फ 1px निर्दिष्ट करने के लिए ठीक है।
इसके अलावा max-और min-शैली विशेषताओं के लिए यह ठीक है। लेकिन फिर यदि संभव हो तो गैर-अधिकतम / मिनट विशेषता एक प्रतिशत हो।
max-और min-गुणों के लिए +1 ।
यह वास्तव में एक अच्छा सवाल है जो मैंने पहले भी कई बार पूछा है। हार्डकोर वेब डिज़ाइनर नहीं होना (मैं विकास की तरफ अधिक हूँ) मैंने आमतौर पर उन डिज़ाइनरों से पूछा है जिनके बारे में मैं उनकी राय के साथ काम करता हूँ, और यहाँ मैं डिस्टिल्ड है:
तत्वों और इतने पर आकार देने के लिए पिक्सेल बनाम प्रतिशत का उपयोग करना वास्तव में व्यक्तिगत स्वाद या प्रत्येक विशिष्ट मामले में आवश्यकताओं का मामला है। यदि आपको इसे स्केल करने की आवश्यकता है, या यह अच्छी तरह से स्केल करेगा, तो प्रतिशत का उपयोग करें। यदि नहीं, तो पिक्सल का उपयोग करें। यहां के लोगों ने एक पृष्ठ में प्रमुख स्तंभों के उदाहरणों का उपयोग किया है, शायद तरल पदार्थ की आवश्यकता होती है, लेकिन सीमाओं को पिक्सेल माप की सटीकता की आवश्यकता हो सकती है।
स्पष्ट रूप से आकार देने वाली छवियां उनके रिज़ॉल्यूशन और पिक्सेल इकाइयों से बहुत अधिक बंधी हैं, इसलिए मैं हमेशा इस मामले में उनका उपयोग करता हूं।
हालाँकि, इम साइज़िंग बनाम पिक्सेल या यहाँ तक कि टेक्स्ट के लिए पॉइंट साइज़िंग का उपयोग करना मछली की पूरी अलग-अलग केतली है। मेरे साथ काम करने वाले अधिकांश लोगों के पास फ़ॉन्ट आकारों के लिए आधार रीसेट शैली है जो 1em के आकार को लगभग 12px तक लाती है। फिर वे टेक्स्ट एलिमेंट्स, फॉर्म कंट्रोल्स और लाइक को आकार देने के लिए हर जगह (या हर जगह जैसे-जैसे पास होते हैं) का इस्तेमाल करते हैं। यह है कि मैं अब भी काम कर रहा हूं क्योंकि यह डेस्कटॉप और लैपटॉप पर विभिन्न ब्राउज़रों, ओएस और डीपीआई में अच्छा काम करता है। मैं हालांकि मोबाइल उपकरणों के लिए वाउच नहीं कर सकता।
एक्सेसिबिलिटी हालांकि महत्वपूर्ण है - यदि आपको विकलांग लोगों के लिए कुछ उपयोगी बनाने की आवश्यकता है या बॉक्स से बाहर विभिन्न उपकरणों पर काम करना है, यहां तक कि जिन चीजों को आप पुराना मान सकते हैं, तो स्केलिंग एक आवश्यकता होगी। साइट को गेट-गो से डिज़ाइन करने के लिए इसे अपने मॉडल में बनाएँ और आप महसूस कर सकते हैं कि उस मामले में निरपेक्ष पिक्सेल साइज़िंग की भी आवश्यकता नहीं है।
उदाहरण के लिए, एक कला-भारी डिज़ाइन संभवतः एकल पैमाने पर डिज़ाइन किया जाने वाला है, लेकिन विकलांग उपयोगकर्ताओं के लिए नई शैक्षिक वेबसाइट पर कई स्थितियों में काम करना होगा।
बस याद रखें, W3C ने एक कारण - लचीलेपन के लिए अपने विनिर्देशों में आकार और स्केलिंग के लिए कई तरीके रखे। अपने दर्शकों के लिए सबसे अच्छा काम करता है और अच्छी तरह से काम करता है (जैसा कि मोस्टर्ड ने पहले कहा था)।
मैं एक सीएसएस / एचटीएमएल विशेषज्ञ नहीं हूं, लेकिन मेरे द्वारा उपयोग किए जाने वाले सम्मेलन बाहरी कंटेनरों और आंतरिक वस्तुओं के प्रतिशत के लिए पिक्सेल का उपयोग करना है।
अंगूठे का एक और नियम मेरे लेआउट की समीक्षा करने वाले किसी भी व्यक्ति के साथ एक तीन पिक्सेल नियम है । यह दुर्लभ है कि सब कुछ वहाँ से बाहर हर ब्राउज़र के भीतर बिल्कुल लाइन जाएगा। हम तीन पिक्सेल या उससे कम कुछ भी ले जाने के लिए लाभ के प्रयास से सहमत हैं।
डिफ़ॉल्ट रूप से सही काम करें। यदि कोई उपयोगकर्ता आपकी साइट पर जावास्क्रिप्ट अक्षम और कोई वरीयता कुकीज़ के साथ आता है, तो आपको उन्हें एक वेब पेज पर काम करना चाहिए जो यथासंभव कार्यात्मक और सुलभ है।
आपकी डिफ़ॉल्ट स्टाइलशीट को ब्राउज़र विंडो के बारे में कुछ भी नहीं मानना चाहिए, और फिर भी एक कार्यात्मक पृष्ठ को प्रस्तुत करना चाहिए, हालांकि, छिपी हुई, 320x320 संकल्प तक, और बिना आकार के आकार तक। यदि फोटोग्राफिक निष्ठा इतनी महत्वपूर्ण है कि आप ब्राउज़र स्केलिंग पर भरोसा नहीं कर सकते हैं, और कभी-कभी यह होता है, तो आपको निश्चित आकार के चित्रों को एनकैप्सुलेट करने वाले तत्वों के लिए पिक्सेल माप (कम से कम न्यूनतम) का उपयोग करना चाहिए, यह सुनिश्चित करने के लिए कि आप के साथ अंत नहीं है। महत्वपूर्ण बातें कवर की जा रही हैं। प्रतिशत के साथ-साथ न्यूनतम चौड़ाई निर्दिष्ट करते हुए आपको अपने उपयोगकर्ताओं को वे एक्सेसिबिलिटी प्रदान करने की आवश्यकता होती है जो आपको चाहिए। यहां तक कि अगर एक्सेसिबिलिटी अब कोई समस्या नहीं है, तो यह बाद में होगा जब साइट सफल होगी।
जब आप ऐसा ब्राउज़र विंडो के बारे में अधिक पता है, तो यह ठीक वैकल्पिक शैली में तय की चौड़ाई का उपयोग करने, अगर डिजाइन को सही ठहराते जोड़ा काम संरक्षण के महत्व को।
यदि आप एक निश्चित आकार को लक्षित कर रहे हैं तो पिक्सेल ठीक हैं। लेकिन अगर आप चाहते हैं कि आपका लेआउट विभिन्न प्रस्तावों / स्क्रीन आकारों पर अच्छा दिखे, तो आपको प्रतिशत जैसे अधिक सापेक्ष उपायों से चिपके रहना चाहिए। अधिकांश लोग बाद को निशाना बना रहे हैं।
यह ठीक है अगर वह है जो अपने ग्राहक को खुश करने के लिए लेता है। अधिकांश समय, आप केवल प्रतिशत के साथ विविध स्क्रीन आकारों में स्थान की मात्रा को संतुलित नहीं कर सकते हैं। CSS3 के मीडिया प्रश्न यहाँ मदद करते हैं लेकिन गोद लेना अभी भी समस्याग्रस्त है।
मैं ज्यादातर मामलों में पिक्सेल पसंद करता हूं। उदाहरण के लिए - सामग्री की डिफ़ॉल्ट चौड़ाई ares: 960px। "1024" में यह ठीक होगा, स्क्रीन के दोनों तरफ छोटे खाली स्थान होंगे। वहाँ कुछ ढाल या पृष्ठभूमि रखो। "1280" या "1440" या "1680" में, या जो भी - वहाँ बड़ा और बड़ा अंतर होगा, लेकिन यह अच्छा लगेगा। हां, 800 के लिए - यह साइट बदसूरत होगी। लेकिन कौन परवाह करता है? हर बड़े खिलाड़ी ने 800 का समर्थन छोड़ दिया। इस संकल्प के साथ बहुत कम लोग हैं।
कई विभिन्न साइटें हैं, जहां %% बहुत बेहतर समाधान होगा, हालांकि।
स्क्रीन के बिल्डिंग ब्लॉक्स पिक्सल हैं। आप निश्चित पिक्सेल आकार के साथ गलत नहीं कर सकते। जैसा कि अन्य पोस्टरों ने उल्लेख किया है, आप स्केलेबल विकल्प के लिए प्रतिशत या "एम" का भी उपयोग कर सकते हैं।