Search code examples
cssresponsive-designbreakpoints

Understand breakpoints calculations from ericportis.com (srcset-sizes)


Example 1x, after breakpoint from this article.
640px / (33,3vw x 1x) = 1920px = 120em

I don't understand this expression.
I thought that 1vw = 1% so
640px / 33,3% = 213,12px
and it's different than 1920px.

How it was calculated?

I know that 33.3 is a result of 100/3 but the expression in my opinion is incorrect. The only way to get 1920 in this case is multiply 640 by 3.


Solution

  • Article author here. Math with vw units (and percentages!) can get a bit confusing... 33.3vw, as you say, is equal to 33.3% of the width of viewport, aka ⅓ of the viewport width. 640px ÷ ⅓ = 640px × 3 = 1920px.