🚴🏿 🈷️ 🤼 TV dulu, tipografi responsif atau bagaimana tidak melupakan semua ukuran perangkat 👩🏼‍🤝‍👩🏻 🕴🏿 🎃

Selamat siang, orang Khabrovit! Belum lama ini, saya menerbitkan terjemahan artikel "Desain Sepenuhnya Responsif Lebih dari Sekedar Permintaan Media . " Dalam publikasi itu, saya berjanji untuk memberi tahu Anda bagaimana saya menggunakan teknik ini dalam proyek saya, apa yang harus saya hadapi dan semua fitur yang terkait dengan teknik ini yang harus Anda perhatikan selama pengembangan. Dalam publikasi hari ini, saya akan berusaha untuk memenuhi janji saya. Jika Anda tertarik pada pengalaman penggunaan praktis dari teknik font responsif dalam proyek nyata, saya meminta kucing.

Jadi mari kita mulai. Secara singkat ingat teknik itu sendiri:

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

/* Example */

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

Saya merumuskan tesis utama sebagai berikut:

Tipografi responsif dan tata letak responsif yang dibangun di atasnya dapat menghemat banyak waktu dan menyederhanakan pengembangan bila diterapkan dengan benar.

, , :

. , , :

— , , , .

, — , , .

, .

, . , 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 . . . , - . , . .

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

, . , . , .

- , .

NB Jika Anda ingin melihat terjemahan dari artikel-artikel ini di masa depan, tulislah di komentar.

TV dulu, tipografi responsif atau bagaimana tidak melupakan semua ukuran perangkat

More articles: