Fully responsive design is more than just media queries

In this publication, I would like to share with you a translation of an article with a very interesting responsive layout technique that I used in my last project. She helped me save a lot of time and simplified my work. If it became interesting to you, what is the secret of this reception, I ask for cat.

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

This can be applied not only to the font size, but also to paddings, margins, and width sizes, which will stretch and contract along with changing the width of the viewport up or down.

I hope you enjoyed the article, including hope that you will use this technique in your projects.

Note translator:

In my next article I will try to share with you my experience of using this technique in a real project, what should I pay attention to and what changes have I made to this technique for my project.

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