Vollständig ansprechendes Design ist mehr als nur Medienabfragen

In dieser Veröffentlichung möchte ich Ihnen eine Übersetzung eines Artikels mit einer sehr interessanten reaktionsschnellen Layout-Technik vorstellen, die ich in meinem letzten Projekt verwendet habe. Sie hat mir geholfen, viel Zeit zu sparen und meine Arbeit zu vereinfachen. Wenn es für Sie interessant wurde, was das Geheimnis dieses Empfangs ist, frage ich nach Katze.

Transfer

, 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;
}

Dies kann nicht nur auf die Schriftgröße angewendet werden, sondern auch auf Auffüllungen, Ränder und Breitengrößen, die sich zusammen mit der Änderung der Breite des Ansichtsfensters nach oben oder unten dehnen und zusammenziehen.

Ich hoffe, Ihnen hat der Artikel gefallen, einschließlich der Hoffnung, dass Sie diese Technik in Ihren Projekten verwenden werden.

Hinweis Übersetzer:

In meinem nächsten Artikel werde ich versuchen, meine Erfahrungen mit der Verwendung dieser Technik in einem realen Projekt mit Ihnen zu teilen, worauf ich achten sollte und welche Änderungen ich an dieser Technik für mein Projekt vorgenommen habe.

Nächster Artikel: Zuerst Fernsehen, reaktionsschnelle Typografie oder wie man nicht alle Gerätegrößen vergisst