👐🏿 👩🏽‍🎓 👟 التلفزيون أولاً ، الطباعة المتجاوبة أو كيفية عدم نسيان جميع أحجام الأجهزة 🌄 👛 ✋🏽

مساء الخير يا خبروفيتس! منذ وقت ليس ببعيد ، نشرت ترجمة لمقال "التصميم المستجيب بالكامل هو أكثر من مجرد طلبات إعلامية" . في هذا المنشور ، وعدت أن أخبرك كيف استخدمت هذه التقنية في مشروعي ، وما كان علي أن أواجهه وجميع الميزات المرتبطة بهذه التقنية التي يجب الانتباه إليها أثناء التطوير. في منشور اليوم ، سأحاول الوفاء بوعدي. إذا كنت مهتمًا بتجربة الاستخدام العملي لتقنية الخط سريع الاستجابة في مشروع حقيقي ، فأنا أسأل عن القط.

لذلك دعونا نبدأ. تذكر بإيجاز التقنية نفسها:

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

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

, . , . , .

- , .

ملاحظة: إذا كنت ترغب في رؤية ترجمة لأي من هذه المقالات في المستقبل ، فاكتب عنها في التعليقات.

التلفزيون أولاً ، الطباعة المتجاوبة أو كيفية عدم نسيان جميع أحجام الأجهزة

More articles: