अनुकूली डिजाइन और फ्रैक्चर बिंदु

1) सिद्धांत

1. सामग्री-पहला: लेआउट कार्यों और सामग्री से बनाया गया है, न कि "लोकप्रिय" चौड़ाई से।

2. मोबाइल-पहला: हम एक सख्त सरल विकल्प के साथ शुरू करते हैं और चौड़ाई/इनपुट क्षमताओं के बढ़ ने के साथ अधिक जटिल हो जाते हैं।

3. प्रगतिशील वृद्धि: मूल यूएक्स जेएस/एनिमेशन के बिना काम करता है; सुधार शर्तों के अनुसार जुड़े हुए हैं।

4. स्थिरता: समान पैटर्न - सभी ब्रेकपॉइंट पर समान व्यवहार।

5. प्रदर्शन-जागरूक: छवियां, ग्रिड और स्क्रिप्ट वजन और जटिलता में अनुकूलित होते हैं।

2) फ्रैक्चर पॉइंट (ब्रेकपॉइंट)

हम वास्तविक उपकरणों के डेटा के अनुसार और पैटर्न (कॉलम/नेविगेशन/टाइपोग्राफी) को बदलकर चुनते हैं।

अनुशंसित सेट (संदर्भ)

• हम संरचना को बदलते समय ही एक ब्रेकपॉइंट दर्ज करते हैं (उदाहरण के लिए, कार्ड के स्तंभ, एक साइडबार की उपस्थिति)।
• एक घटक (कंटेनर अनुरोध) के भीतर स्थानीय ब्रेक की अनुमति है।

3) कंटेनर अनुरोध बनाम मीडिया अनुरोध

जब मीडिया प्रश्न करता है '@ media': पूरे पृष्ठ का लेआउट बदलता है (नेविगेशन, टेम्पलेट)।

जब कंटेनर '@ contener': कार्ड/विजेट को इसकी उपलब्ध चौड़ाई के अनुसार समायोजित करना होगा (घटक पृष्ठ से स्वतंत्र है)।

css
/ Include container rating for unit/
.widget { container-type: inline-size; }

/ Inside - we adapt the card to the width of the container/
@container (min-width: 520px) {
.card { grid-template-columns: 1fr 1fr; }
}

अवयवों के लिए पृष्ठ फ्रेम + कंटेनरों के लिए मीडिया का उपयोग करें।

4) टाइपोग्राफी: द्रव + कदम

'क्लैंप ()' और ब्रेकपॉइंट पर कदम मिलाएं।

css
:root {
/ Basic fluid headset/
--fs-body: clamp(15px, 1. 2vw + 0. 2rem, 18px);
--fs-h2:  clamp(20px, 1. 6vw + 0. 4rem, 24px);
}
body { font-size: var(--fs-body); line-height: 1. 55; }
h2  { font-size: var(--fs-h2); line-height: 1. 3; }
@media (min-width: 1200px) {
h2 {letter-spacing: .005em; }/fine tuning on LG +/
}

• लाइन की लंबाई 45-80 वर्ण (साइडबार 36-60)।
• परिमाण चरण 4/8-पीटी के गुणक हैं; लाइन-ऊंचाई ब्रेकपॉइंट में स्थिर है।

5) ग्रिड और मॉड्यूल

अनुभाग स्तर पर - सीएसएस ग्रिड (स्तंभ, क्षेत्र); अंदर - फ्लेक्स।

घटक ऊंचाइयाँ बेसलाइन के गुणक हैं (जैसे। 40/48/56 px)।

हमारे पास 2 घनत्व प्रीसेट हैं: आराम (पढ़ना/डैशबोर्ड) और कॉम्पैक्ट (टेबल/प्रो)।

css
.container {
display: grid; gap: 24px;
grid-template-columns: repeat(12, minmax(0,1fr));
max-width: 1280px; margin: 0 auto; padding: 0 16px;
}
@media (max-width: 1199px) {.container { grid-template-columns: repeat(8,1fr); gap: 20px; }}
@media (max-width: 839px) {.container { grid-template-columns: repeat(6,1fr); gap: 16px; }}
@media (max-width: 599px) {.container { grid-template-columns: repeat(4,1fr); }}

6) छवियाँ और मीडिया

html
<img src="card-640. jpg"
srcset="card-640. jpg 640w, card-960. jpg 960w, card-1280. jpg 1280w"
sizes="(min-width:1200px) 33vw, (min-width:840px) 50vw, 100vw"
alt = "Description">

css
.media { aspect-ratio: 16/9; object-fit: cover; }

पृष्ठभूमि के लिए - 'छवि-सेट ()' और आलसी-लोडिंग।

छवि में पाठ - केवल प्लेट/ओवरले पर; इसके विपरीत ≥ एए।

7) नेविगेशन और उत्तरदायी पैटर्न

एक्सएस/एसएम: नीचे-नव या हैमबर्गर, उल्लेखनीय सीटीए; छिपी हुई खोज शीर्ष पर फैलती है।

एमडी: लगातार-साइडबार/मेगा-मेनू दिखाई देता है।

एलजी/एक्सएल: नेविगेशन के दो स्तर, त्वरित फिल्टर, ब्रेड क्रम्ब।

व्यवहार: तत्व बेतरतीब ढंग से "स्थानांतरित" नहीं करते हैं - हमेशा पहले वर्णित योजनाओं में से एक।

8) इनपुट: होवर/टच/कीबोर्ड

css
@ media (hover: hover) and (pointer: fine) {/hover effects/}
@ media (hover: none), (pointer: coarse) {/touch-patterns/}
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

• कोई महत्वपूर्ण सामग्री "केवल होवर में"।
• क्लिक क्षेत्र: ≥ 44 × 44 (मोबाइल), ≥ 32 × 32 (डेस्कटॉप)।
• कुंजीपट सभी ब्रेकपॉइंट पर समर्थित है।

9) सुरक्षित क्षेत्र और सिस्टम कटआउट

css
.page {
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
padding-bottom:max(16px, env(safe-area-inset-bottom));
}

10) डार्क/लाइट थीम और कंट्रास्ट

विषय ब्रेकपॉइंट से स्वतंत्र हैं: इसके विपरीत लक्ष्य हर जगह समान हैं।

एक्सएस पर, "एसिड" लहजे से बचें; एक अंधेरे पृष्ठभूमि पर लिंक की हल्कापन बढ़ाएं।

'प्रीफर्स-कलर-स्कीम' और मैनुअल स्विच के लिए समर्थन करें।

11) प्रदर्शन

महत्वपूर्ण सीएसएस - इनलाइन या 'मीडिया = "प्रिंट "/प्रीलोड रणनीति के माध्यम से; जेएस लोड में देरी हुई।

लंबी सूचियों पर लेआउट-भारी एनिमेशन से बचें; एनिमेट 'अपारदर्शिता/परिवर्तन'।

चित्र/विजेट का आलसी लोडिंग; स्पिनरों के बजाय कंकाल।

दर्जनों कार्डों पर "भारी" छाया/फ़िल्टर सीमित करें।

12) डिजाइन प्रणाली टोकन (उदाहरण)

json
{
"breakpoints": { "xs": 360, "sm": 600, "md": 840, "lg": 1200, "xl": 1440 },
"container":  { "sm": 584, "md": 808, "lg": 1152, "xl": 1320 },
"columns":   { "xs": 4, "sm": 6, "md": 8, "lg": 12 },
"gutter":   { "sm": 16, "md": 20, "lg": 24, "xl": 32 },
"space":    { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32 }
}

css
:root {
--bp-sm: 600px; --bp-md: 840px; --bp-lg: 1200px; --bp-xl: 1440px;
--container-lg: 1152px;
}
@media (min-width: var(--bp-lg)) {
.container { max-width: var(--container-lg); }
}

13) घटक कार्यशाला (कंटेनर ब्रेक)

css
.card { display: grid; gap: 12px; container-type: inline-size; }
.card__media { aspect-ratio: 4/3; }
@container (min-width: 420px) {
.card { grid-template-columns: 1fr 1. 2fr; align-items: center; }
.card__media { aspect-ratio: 16/9; }
}

• एक्सएस: स्टैक्ड-व्यू (बाईं ओर लेबल, दाईं ओर मान, ब्लॉक में)।
• एसएम +: क्षैतिज स्क्रॉलिंग केवल स्तंभों की अधिकता के साथ, टोपी/पहले स्तंभ को ठीक करें।
• संख्याएँ - टैबुलर-nums, दशमलव संरेखण.

14) स्थानीयकरण और आरटीएल

दर्पण आइकन/तीर/मार्जिन के लिए 'dir = "rtl +': dir (rtl)।

अनुवाद लाइनों की लंबाई को 20-30% तक बढ़ा सकते हैं - स्टॉक को नीचे रखें।

कुछ लेखन के लिए (उदाहरण के लिए, जॉर्जियाई/थाई), आधार आकार को 1 पीएक्स से बढ़ाएं।

15) iGaming की बारीकियां

टूर्नामेंट/बोनस कार्ड: ग्रिड 3 × एन (एलजी), 2 × एन (एमडी), 1 × एन (एसएम/एक्सएस); सीटीए और शर्तें - एक स्थायी क्षेत्र में।

नेता/रेटिंग: चिपचिपा टोपी/पहला स्तंभ; एक्सएस - स्टैक्ड मोड पर; संख्या मोनोस्पेस्ड हैं।

भुगतान रूप: एक्सएस पर - एकल-स्तंभ; एमडी - 2 स्तंभों पर (फ़ील्ड + स्पष्टीकरण)।

जिम्मेदार सूचनाएं (18 +, सीमा, जोखिम): हमेशा सभी ब्रेकपॉइंट्स पर दिखाई देती हैं, एएए कंट्रास्ट, बिना "होवर में छिपी हुई"।

16) एंटी-पैटर्न

ग्रिड/स्तंभों के बजाय स्थिर खंड चौड़ाई।

"ब्रेक पॉइंट प्रति पिक्सेल": बहुत सारे मीडिया अनुरोध करते हैं - अराजकता।

टूटी हुई लय: बिना किसी कारण के आसन्न वर्गों में अलग-अलग गटर/पिच।

एक छवि में गंभीर पाठ एक मरने के बिना।

केवल होवर के साथ उपलब्ध सामग्री (स्पर्श अप्राप्य)।

लंबी सूचियों पर लेआउट गुणों के एनिमेशन।

17) क्यूए चेकलिस्ट

मेश और कंटेनर

• कॉलम और गटर ब्रेकपॉइंट के अनुरूप हैं; कंटेनर केंद्रित हैं।
• घटक सही ढंग से "प्रवाह" - बिना टूटे स्तंभ।

टाइपोग्राफी

• लाइन की लंबाई 45-80; 'क्लैंप ()' के माध्यम से तरल पदार्थ पिन।
• पाठ विपरीत दोनों विषयों में WCAG से मेल खाता है।

छवियाँ

• 'srcset/sizes', 'पहलू-अनुपात' आलसी-लोडिंग; कोई सीएलएस नहीं।

इनपुट और A11y

• कुंजीपट नेविगेशन; ': फोकस-दृश्यमान' दृश्यमान।
• छूने के लिए विकल्प पर ध्यान दें; क्षेत्रों ≥ 44 × 44 पर क्लिक करें।
• 'पसंद-कम-गति' समर्थित।

निष्पादन

• केवल 'रूपांतरण/अपारदर्शिता' एनिमेटेड है; गंभीर प्रभाव सीमित हैं।
• क्रिटिकल सीएसएस/जेएस कुशलता से लोड करता है।

18) डिजाइन प्रणाली में प्रलेखन

"उत्तरदायी और ब्रेकपॉइंट्स": ब्रेकपॉइंट, कंटेनर, कॉलम और गटर की तालिका।

कंटेनर प्रश्न: अनुकूली घटकों के उदाहरण।

"द्रव प्रकार": 'क्लैंप ()' सूत्र और स्केल प्रीसेट।

"नेविगेशन पैटर्न": XS/SM/MD/LG/XL वेरिएंट।

छोटी क्लिप और सीएलएस/एलसीपी मानों के साथ "डू/डोंट"।

संक्षिप्त सारांश

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