🚴🏾 👳 👧🏼 TV first, typographie réactive ou comment ne pas oublier toutes les tailles d'appareils 👨🏽‍💻 🧘 👳

Bonjour, Khabrovites! Il n'y a pas longtemps, j'ai publié une traduction de l'article "Conception entièrement réactive - c'est plus qu'une simple demande des médias" . Dans cette publication, je vous ai promis de vous expliquer comment j'utilisais cette technique dans mon projet, ce à quoi je devais faire face et toutes les fonctionnalités associées à cette technique auxquelles vous devriez absolument faire attention pendant le développement. Dans la publication d'aujourd'hui, je vais essayer de tenir ma promesse. Si vous êtes intéressé par l'expérience de l'utilisation pratique de la technique des polices réactives dans un projet réel, je demande cat.

Alors, commençons. Rappelez brièvement la technique elle-même:

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

/* Example */

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

J'ai formulé la thèse principale comme suit:

La typographie réactive et la mise en page réactive construite sur elle peuvent gagner beaucoup de temps et simplifier le développement lorsqu'elles sont appliquées correctement.

, , :

. , , :

— , , , .

, — , , .

, .

, . , 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 Si vous souhaitez voir une traduction de l'un de ces articles à l'avenir, écrivez à ce sujet dans les commentaires.

TV first, typographie réactive ou comment ne pas oublier toutes les tailles d'appareils

More articles: