La conception entièrement réactive est plus que de simples requêtes médiatiques

Dans cette publication, je voudrais partager avec vous une traduction d'un article avec une technique de mise en page responsive très intéressante que j'ai utilisée dans mon dernier projet. Elle m'a aidé à gagner beaucoup de temps et à simplifier mon travail. Si cela vous est devenu intéressant, quel est le secret de cette réception, je demande chat.

Transfert

, 14px 769px 20px 2048px.

, DOM. (viewport size). , , DOM- .

- CSS3 CSS. (breakpoints) 480px, 768px 769px. -. , 3, 4, 5 ? 1px 2048px 1px. , CSS, 2048px 2047px, 1px 0px.

calc CSS3 (vh, vw) .

calc CSS .

, -. , , .

, calc IE9.

html {
  font-size: 1vh;
}

, 1800px, 18px, 1% 1800. , 800px 8px. , .

, calc, .

Javascript ,
, . , .

. : , .
( FreelancerLifeStyle).

(Math.random() * (2048 - 769) + 769)

Javascript , — 769 2048. Math.random() 0 0.9999999999999999. 2048 769, 1279. , * 1279+769, 769 2048. , 0*(1279)+769 769 0.999999999999*(1279)+769 2047.999999998721.

.

, 14px 20px, 10px 14px. 0 0.999999999999, 10 14. , 0*10+14 14 0.9999*10+14 23,9999, Javascript Math.random CSS. , ?

, . VW, 100vw. , 100vw 1366px 1366px, 1560px 1560px, .

(769px), (2048px) (100vw), , . (100vw — 769px)/2048px 0 , 100vw. , 1800px, (100vw — 769px)/2048px (1800px — 769px)/2048px 0.50341796875. . 0.50341796875 10 ( ?), 5.0341796875. 5.0341796875 14px, 19.0341796875px, 1800px. 14px + 10 * ((2048 — 769px) / 2048 20px.

, :

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

/* Example */

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

, 769px 2048px ( 18px), 14px 20px.

-, .

/* Example */

/* Mobile and Tablet */
@media (max-width: 768px) { 
  html {
    font-size: calc(16px + 2 * ((100vw - 360px) / 768));
  }
}

/* Laptop and Desktops screens */
@media (min-width: 769px) and (max-width: 2048px) {
  html {
    font-size: calc(14px + 10 * ((100vw - 769px) / 2048));
  }
}

/* Excessively large screens */
html {
  font-size: 36px;
}

Cela peut être appliqué non seulement à la taille de la police, mais aussi aux rembourrages, marges et tailles de largeur, qui s'étireront et se contracteront en changeant la largeur de la fenêtre vers le haut ou vers le bas.

J'espère que vous avez apprécié l'article, y compris l'espoir que vous utiliserez cette technique dans vos projets.

Remarque traducteur:

Dans mon prochain article, je vais essayer de partager avec vous mon expérience de l'utilisation de cette technique dans un projet réel, à quoi dois-je faire attention et quels changements ai-je apportés à cette technique pour mon projet.

Article suivant: TV d'abord, typographie réactive ou comment ne pas oublier toutes les tailles d'appareils