🍃 👩🏽‍🎓 🤾🏾 टीवी पहले, उत्तरदायी टाइपोग्राफी या सभी प्रकार के उपकरणों के बारे में कैसे नहीं भूलना चाहिए 👄 🛢️ 🌽

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

तो चलो शुरू करते है। संक्षेप में तकनीक को ही याद रखें:

html {
  font-size: minimumPixel + range * ((viewportWidth - minScreenWidth) / maxScreenWidth)
}

/* Example */

html {
  font-size: calc(14px + 10 * ((100vw - 769px) / 2048));
}

मैंने मुख्य थीसिस इस प्रकार तैयार की:

उत्तरदायी टाइपोग्राफी और उस पर निर्मित उत्तरदायी लेआउट बहुत समय बचा सकता है और सही ढंग से लागू होने पर विकास को सरल बना सकता है।

, , :

. , , :

— , , , .

, — , , .

, .

, . , fullstack . , - . fullstack , , backend Python. , JQuery VueJs. . . , , MVP. SPA -. BI-. BI-, , backend-. (, , ), . , - .

- — TV first. , . . . , . ? . , , , . . , . . , . . , .

MVP . , . CSS, JS . . - . , , , , .

, . , . .

, :

— -, .

. .

? . , . , . -. . , . , . . . — . . . . . rem. . :

. , . , . css-tricks
. .
, . , . .

. .
. , .

. . , , , . - .

, . — google chrome. , , , .

. google.com . . google . . .

— . . , , . .

- , . , . medium.com 2018 Pixels vs. Ems: Users DO Change Font Size, https://archive.org. , 3.08%. ? . , . - , .

? . , . , . ? . . , . , .

, -. Pixels vs. Relative Units in CSS: why it’s still a big deal. - , - , .

. , , . - . .

, :

font-size: minimumPixel + range * ((viewportWidth - minScreenWidth) / maxScreenWidth)

Range . , 10 769px 2048px . ? . . , , minimumPixel + range. , 769px 2048px 14px 20px : 14px + 10 * ((2048 — 769px) / 2048.

360px.

@media screen and (max-width: 360px) {
  html {
    font-size: calc(14px + 2 * ((100vw - 320px) / 360));
  }
}

30px 15.

/* Excessively large screens */
@media screen and (min-width: 2049px) {
  html {
    font-size: calc(30px + 15 * ((100vw - 2049px) / 4096));
  }
}

, . . . , , . .

. rem. , , . rem. , .

. , , , iphone 5. , . , . , .

, — . . , . .

, :

/* Small mobile */
@media screen and (max-width: 360px) {
  html {
    font-size: calc(14px + 2 * ((100vw - 320px) / 360));
  }
}

@media screen and (min-width: 361px) and (max-width: 768px) {
  html {
    font-size: calc(16px + 2 * ((100vw - 361px) / 768));
  }
}

/* Laptop and Desktops screens */
@media screen and (min-width: 769px) and (max-width: 2048px) {
  html {
    font-size: calc(14px + 5 * ((100vw - 769px) / 2048));
  }
}

/* Excessively large screens */
@media screen and (min-width: 2049px) {
  html {
    font-size: calc(30px + 15 * ((100vw - 2049px) / 4096));
  }
}

— , - . , .

. , — rem :

@media screen and (min-width: 361px) and (max-width: 768px) {
  html {
    font-size: calc(1rem + 2 * ((100vw - 361px) / 768));
  }
}

. , , . , . , . , . 16px. , : People don't change the default 16px font size in their browser (You wish!). . , Opera Mini , Kindle 3, . 2016 . . . , - . , . .

, . . . . : . , , . , . , . . , . .

, . , . , .

- , .

PS यदि आप भविष्य में इनमें से किसी भी लेख का अनुवाद देखना चाहते हैं, तो टिप्पणियों में इसके बारे में लिखें।

टीवी पहले, उत्तरदायी टाइपोग्राफी या सभी प्रकार के उपकरणों के बारे में कैसे नहीं भूलना चाहिए

More articles: