📳 😾 👶🏼 TV primeiro, tipografia responsiva ou como não esquecer todos os tamanhos de dispositivos ⚒️ 🏂🏿 💏

Boa tarde, Khabrovites! Há pouco tempo, publiquei uma tradução do artigo "Design totalmente responsivo é mais do que apenas solicitações de mídia" . Nessa publicação, prometi contar a você como usei essa técnica em meu projeto, o que eu tinha que enfrentar e todos os recursos associados a essa técnica que você definitivamente deveria prestar atenção durante o desenvolvimento. Na publicação de hoje, tentarei cumprir minha promessa. Se você está interessado na experiência do uso prático da técnica de fonte responsiva em um projeto real, peço cat.

Então vamos começar. Lembre-se brevemente da própria técnica:

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

/* Example */

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

Formulei a tese principal da seguinte forma:

A tipografia responsiva e o layout responsivo construído nela podem economizar muito tempo e simplificar o desenvolvimento quando aplicados corretamente.

, , :

. , , :

— , , , .

, — , , .

, .

, . , 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 Se você quiser ver uma tradução de qualquer um desses artigos no futuro, escreva sobre isso nos comentários.

TV primeiro, tipografia responsiva ou como não esquecer todos os tamanhos de dispositivos

More articles: