👩‍👧 🙅 🌯 उत्तरदायी फ़ॉन्ट। लेआउट और न्यूनतम मूल्यों के बीच पाठ को अपनाना 🍓 🍢 🔵

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

तो चुनौती। लेआउट के अनुसार मूल्य को इंगित करें, साथ ही न्यूनतम मूल्य जिस पर पाठ या शीर्षक मोबाइल उपकरणों पर अच्छा लगेगा, उदाहरण के लिए iPhone 5 (320px)। इस स्थिति में, फ़ॉन्ट स्क्रीन की चौड़ाई के आधार पर अनुकूल, बढ़ता या घटता जाएगा।

हम लेआउट से प्रारंभिक मान लेते हैं, उदाहरण के लिए, 40 पीएक्स के आकार के साथ एच 1 हेडर। हमें संपूर्ण कैनवास लेआउट की चौड़ाई की भी आवश्यकता है, उदाहरण के लिए 1280px।

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

सीएसएस में उसके बाद 24px मिला , फ़ॉन्ट-आकार के बजाय: 40px; निम्नलिखित लिखें।

font-size: calc(24px + 16 * (100vw / 1280));

जहां 24px हमारा न्यूनतम फ़ॉन्ट है, 16 लेआउट 40 में फ़ॉन्ट और 24 (40-24 = 16) में न्यूनतम फ़ॉन्ट के बीच का अंतर है। 100vw व्यूपोर्ट (स्क्रीन) की पूर्ण वर्तमान चौड़ाई है; 1280 लेआउट की चौड़ाई है।

हम एक उत्तरदायी फ़ॉन्ट का परीक्षण करते हैं और प्राप्त करते हैं जो लेआउट के आकार से पूरी तरह मेल खाता है।

लेकिन, 320px के आकार में, हम वांछित परिणाम नहीं देखेंगे, अर्थात् एक 24px फ़ॉन्ट। यह इस तथ्य के कारण है कि हमने बिल्कुल 320px में न्यूनतम स्क्रीन आकार निर्दिष्ट नहीं किया है।

स्थिति को हल करने के लिए, हम 767px के लिए एक मीडिया अनुरोध लिखते हैं, और अंदर हम सूत्र बदलते हैं:

@media (min-width: 767px){
 h1 {
  font-size: calc(24px + (16 + 16 * 0.7) * ((100vw - 320px) / 1280));
 }
}

यहां हम व्यूपोर्ट की पूरी चौड़ाई से 320px घटाते हैं, साथ ही 16 की एक अतिरिक्त संख्या जोड़कर हम 70% (16 + 16 * 0.7) जोड़ते हैं। हम

कार्य के साथ पूर्ण अनुपालन देखते हैं और देखते हैं! उसी समय, बिंदु को तोड़ने के लिए संक्रमण को मूल रूप से बनाया गया है और ध्यान देने योग्य नहीं है!

बेशक, हम SCSS मिश्रण में यह सब बंद कर सकते हैं:

$maxWidth: 1280;
@mixin adaptiv-font($pcSize, $mobSize) {
	$addSize: $pcSize - $mobSize;
	$addMobSize: $addSize + $addSize * 0.7;
	@media (max-width: 767px) {
		font-size: calc(#{$mobSize + px} + #{$addMobSize} * ((100vw - 320px) / #{$maxWidth}));
	}
	@media (min-width: 767px) {
		font-size: calc(#{$mobSize + px} + #{$addSize} * (100vw / #{$maxWidth}));
	}
}

और निम्नानुसार कनेक्ट करें:

h1{
 @include adaptiv-font(40, 24);
}

आप मीडिया क्वेरी से पूरी तरह से छुटकारा पा सकते हैं:

$maxWidth: 1280;
@mixin adaptiv-font($pcSize, $mobSize) {
	$addSize: $pcSize - $mobSize;
	$maxWidth: $maxWidth - 320;
	font-size: calc(#{$mobSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth}));
}

मुझे टिप्पणियों में पढ़कर खुशी होगी कि इस समाधान को और कैसे बेहतर बनाया जा सकता है। ध्यान देने के लिए आपको धन्यवाद!

वीडियो से सामग्री के आधार पर " अनुकूली फ़ॉन्ट। सीएसएस + एससीएसएस मिश्रण पर एक उत्तरदायी (रबर) फ़ॉन्ट के कार्यान्वयन का एक उदाहरण " यूट्यूब चैनल " लाइफ के लिए फ्रीलांसर " पर

उत्तरदायी फ़ॉन्ट। लेआउट और न्यूनतम मूल्यों के बीच पाठ को अपनाना

More articles: