Build adaptive layouts without media queries

Sep 11, 2025
कैसे करना है

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

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

    [1 1] ग्रिड और फ्लेक्सबॉक्स के साथ एक ब्लॉग बनाएं

पारंपरिक तरीका

Adaptive layouts: breakpoints

ब्रेकपॉइंट्स गैर-मानक व्यूपोर्ट्स के लिए असंतोषजनक परिणाम हो सकते हैं

पोर्टेबल डिवाइस दुनिया भर में ले जा रहे हैं। सभी प्रकार के डिवाइस वेबसाइट बनाने के तरीके को बदल रहे हैं। 'एक उत्तरदायी वेबसाइट' द्वारा अधिकांश लोग केवल डेस्कटॉप और मोबाइल संस्करण (कभी-कभी डेस्कटॉप, टैबलेट, मोबाइल) मानते हैं। इस तरह यह परंपरागत रूप से काम करता है: 

 एच 1 {
फ़ॉन्ट आकार: 80px;
}
.container {
चौड़ाई: 980 पीएक्स;
मार्जिन: 0 ऑटो;
}

@media (अधिकतम चौड़ाई: 1023px) {
H1 {
फ़ॉन्ट आकार: 48 पीएक्स;
}
.container {
चौड़ाई: ऑटो;
पैडिंग: 0 30 पीएक्स;
}
}

वास्तव में, आमतौर पर वेबसाइट लेआउट हम देख रहे हैं हमारे डिवाइस के लिए नहीं बनाया गया है। उदाहरण के लिए, आइए देखें कि हम फ़ॉन्ट-आकार को कैसे समायोजित करते हैं & lt; h1 & gt; शीर्षक:

[4 9] Adaptive layouts

केवल एक ब्रेकपॉइंट के साथ आप अजीब दिखने वाले बिंदु आकारों के साथ समाप्त हो सकते हैं

आप देखते हैं, हमारे & lt; h1 & gt; शीर्षक में 320px और 800px चौड़ाई डिवाइस पर "फ़ॉन्ट-आकार: 48px" है, और 1024px और 2560px पर "फ़ॉन्ट-आकार: 80px" है।

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

Adaptive layouts: font size

आप प्रत्येक स्क्रीन पर फ़ॉन्ट आकार को सही करने के लिए कभी भी पर्याप्त ब्रेकपॉइंट नहीं बना सकते हैं

हमें वास्तव में क्या चाहिए:

व्यूपोर्ट इकाइयां

[9 2] [9 3] Adaptive layouts: viewpoint units

व्यूपोर्ट इकाइयां मामलों में सुधार करती हैं, लेकिन उन्हें अभी भी काम की आवश्यकता है

इस समस्या का समाधान व्यूपोर्ट इकाइयों vw और vh शामिल है। ये लंबाई इकाइयां हैं जो व्यूपोर्ट की चौड़ाई / ऊंचाई की 1/100 वीं का प्रतिनिधित्व करती हैं (आईई 9 + से ब्राउज़र द्वारा व्यापक रूप से समर्थित)।

हम इन आकारों के अनुसार वेबपृष्ठ के गुणों को समायोजित करने के लिए इनका उपयोग कर सकते हैं। स्थिति थोड़ा बेहतर हो जाएगी, लेकिन दर्द अभी भी वही है: 

 एच 1 {
फ़ॉन्ट आकार: कैल्क ((80/1 9 20) * 100vw;
}
.container {
चौड़ाई: 80VW;
मार्जिन: 0 ऑटो;
}

@media (अधिकतम चौड़ाई: 1023px) {
H1 {
फ़ॉन्ट आकार: कैल्क ((48/375) * 100VW;
}
.container {
चौड़ाई: 90vw;
}
}

हम कभी नहीं जानते कि यह बहुत बड़ा या बहुत छोटा है या नहीं।

हम एक सच्ची अनुकूली लेआउट सिस्टम कैसे बना सकते हैं? हम एक उत्तरदायी वेबसाइट कैसे डिजाइन करते हैं जो 320px से 2560px तक मूल रूप से काम करता है?

आदर्श रूप में, आपके मॉकअप को लेआउट के पीछे तर्क की व्याख्या करनी चाहिए, और यह एक छोटे से रिज़ॉल्यूशन से बड़े होने के लिए कैसे अनुकूल है:

समाधान

[12 9]

यहां वास्तव में अनुकूली लेआउट सिस्टम बनाने का तरीका बताया गया है

हम लगातार एक छोटी स्क्रीन से गुणों को एक बड़े से समायोजित करना चाहते हैं। कोई ब्रेकपॉइंट्स और कोई मीडिया क्वेरी नहीं। हम जो चाहते हैं वह एक एकल मान है जो हर प्रदर्शन के लिए काम करता है।

दो चर के साथ एक गणित समारोह कुंजी है। उदाहरण के लिए, यदि हम एक शीर्षक फ़ॉन्ट आकार समायोजित करना चाहते हैं, तो फ़ंक्शन इस तरह दिखना चाहिए:

1920x + y = 80
375x + y = 48

1920 - एक डिजाइन मॉकअप में डिफ़ॉल्ट डेस्कटॉप चौड़ाई (100vw के बराबर)
375 - एक डिजाइन मॉकअप में डिफ़ॉल्ट मोबाइल चौड़ाई (100VW बराबर)
80 - डेस्कटॉप पर वांछित एच 1 शीर्षक फ़ॉन्ट आकार
48 - मोबाइल पर वांछित एच 1 शीर्षक फ़ॉन्ट आकार

ये एक्स और वाई मान हैं:

x = (80 - 48) / (1920 - 375)
x = 0.0207

y = 80 - 1920 * 0.0207
y = 40.256

इन मानों का उपयोग करने के लिए हमें वेबपृष्ठ पर गणना करने के लिए कैल्क सीएसएस फ़ंक्शन की आवश्यकता होगी (आईई 9 + से ब्राउज़रों द्वारा व्यापक रूप से समर्थित)। हमें x * 100 बार (क्योंकि 1VW यूनिट = 1/100 वें व्यूपोर्ट चौड़ाई) की गणना करनी चाहिए।

हम अपना मूल कार्य करते हैं:
1920x + y = 80
375x + y = 48

1920 को 100VW के साथ बदलें:
100vw * x + y = वांछित मूल्य

मानों के साथ x और y को बदलें:
100VW * 0.0207 + 40.256 = वांछित मान

हमें अंतिम सीएसएस शैली मिलती है: 

 एच 1 {फ़ॉन्ट-आकार: कैल्क (2.07VW + 40.25PX)}

आश्चर्यजनक रूप से पर्याप्त, अंत में यह काम करता है कि हम कैसे चाहते थे!

सभी डिस्प्ले के लिए सिर्फ एक संपत्ति। मूल्यों को बार-बार ओवरराइट करने की आवश्यकता नहीं है। आप किसी भी प्रकार की गुणों को समायोजित और गणना कर सकते हैं: चौड़ाई, फ़ॉन्ट-आकार, पैडिंग, मार्जिन इत्यादि।

आइए इस तकनीक का उपयोग करके एक वास्तविक लेआउट बनाने का प्रयास करें:

लेकिन इस दृष्टिकोण में एक नुकसान है: यह समझना मुश्किल है कि इस कैल्क फ़ंक्शन के पीछे मूल्य क्या है। हम इसे कैसे सरल बना सकते हैं?

यदि आप दैनिक एचटीएमएल कोडिंग कर रहे हैं, तो आप शायद एसएएस / एससीएसएस प्री-प्रोसेसर से परिचित हैं। यहां आपके लिए थोड़ी मदद मिली है: चलो एक "मिक्सिन" करें और इन सभी गणनाओं को स्वचालित रूप से स्वचालित रूप से घटित करें, और अभी भी हमारे मूल मूल्यों को रखें।

यह ऊपर वर्णित एक ही कार्य है, लेकिन एक सैस मिक्सिन के रूप में बनाया गया है:

[1 9 2] $ डिस्प्ले-वाइड: 1920 $ प्रदर्शन-संकीर्ण: 375 @ मिक्सिन तरल ($ संपत्ति, $ minvalue, $ maxvalue) $ x: ($ MaxValue - $ MinValue) / ($ डिस्प्ले-वाइड - $ डिस्प्ले-संकीर्ण) $ y: $ MaxValue - $ डिस्प्ले-वाइड * $ x # {$ संपत्ति}: कैल्क (# {100 * $ x} vw + # {$ y} px) एच 1 @ इनक्लूड फ्लूइड ('फ़ॉन्ट-साइज', 48,80) .container @ इनक्ल्यूड फ्लूइड ('चौड़ाई', 315,1580) @ जुड़ द्रव ('पैडिंग', 30,60)

Adaptive layouts: mixin

एक सैस मिक्सिन पूरी प्रक्रिया को आसान बना सकता है

यह तकनीक अंततः वास्तव में उत्तरदायी वेब-लेआउट बनाने के लिए एक बहुत ही परिष्कृत समाधान प्रदान करता है। यह अधिकांश ब्राउज़रों का समर्थन करता है, एक आगंतुक को सही ढंग से दिखाए जाने के लिए अपनी परियोजना को सुरक्षित करता है, आपकी शैलियों की संरचना को सरल बनाता है, और सबसे महत्वपूर्ण रूप से आपके वेब लेआउट को लगातार और तार्किक बनाता है। मुझे उम्मीद है कि यह आपको कुछ आश्चर्यजनक वेब परियोजनाओं को लॉन्च करने में मदद कर सकता है।

संबंधित आलेख:

    [1 1] 17 वास्तव में उपयोगी उत्तरदायी वेब डिजाइन ट्यूटोरियल
[1 1] उत्तरदायी वेब टाइपोग्राफी के नियम [1 1] CSS ग्रिड के साथ एक उत्तरदायी लेआउट बनाएँ

कैसे करना है - सर्वाधिक लोकप्रिय लेख

फ़ोटोशॉप में एक परत कैसे फ़्लिप करें: एक पूर्ण गाइड

कैसे करना है Sep 11, 2025

डबल देख रहे हैं? इस छवि को मूल के साथ फ़्लिप किया गया ..

How to draw feathers

कैसे करना है Sep 11, 2025

यदि आप हमेशा पंखों को आकर्षित करने के बारे में जानना चाहते हैं, और उन्हें �..

How to build an AR app

कैसे करना है Sep 11, 2025

पेज 1 में से 3: एक एआर ऐप बनाएं: चरण 01-10 ..

Understanding the CSS display property

कैसे करना है Sep 11, 2025

यह आधी रात है, और वह एक डिव आपकी साइट पर अभी भ�..

वी-रे के साथ बड़े पैमाने पर विस्फोट कैसे करें

कैसे करना है Sep 11, 2025

3 डी विस्फोटों को बनाना और संकुचित करना आम तौर पर द..

पुराने मास्टर्स की तरह एक चित्र पेंट

कैसे करना है Sep 11, 2025

इस ट्यूटोरियल के लिए हम एक पुराने मास्टर पेंटिंग ..

Mock up AR graphics with After Effects

कैसे करना है Sep 11, 2025

प्रभाव के बाद कुछ शक्तिशाली उपकरण हैं जिनका उपयोग हम बढ़ी वास्तविकता की �..

Create interactive charts in Ionic 2

कैसे करना है Sep 11, 2025

जब आप एक छोटी टीम में काम करते हैं, तो एंड्रॉइड, आई�..

श्रेणियाँ