🤰 🤚🏽 🛳️ TV first, responsive typography or how not to forget about all sizes of devices 👩🏼‍💻 🎇 🎅🏽

Good afternoon, Khabrovites! Not so long ago, I published a translation of the article “Fully Responsive Design is More Than Just Media Requests . ” In that publication, I promised to tell you how I used this technique in my project, what I had to face and all the features associated with this technique that you should definitely pay attention to during development. In today's publication, I will try to fulfill my promise. If you are interested in the experience of the practical use of the responsive font technique in a real project, I ask for cat.

So let's get started. Briefly recall the technique itself:

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

/* Example */

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

I formulated the main thesis as follows:

Responsive typography and responsive layout built on it can save a lot of time and simplify development when applied correctly.

, , :

. , , :

— , , , .

, — , , .

, .

, . , 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 If you would like to see a translation of any of these articles in the future, write about it in the comments.

TV first, responsive typography or how not to forget about all sizes of devices

More articles: