Skip to content

Instantly share code, notes, and snippets.

@mjchamplin

mjchamplin/gist:6440b528820f9a09da4b

Created October 24, 2014 02:22
Show Gist options
  • Save mjchamplin/6440b528820f9a09da4b to your computer and use it in GitHub Desktop.
Save mjchamplin/6440b528820f9a09da4b to your computer and use it in GitHub Desktop.
Download ZIP
A box theory.
Raw
gistfile1.txt
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
.box { width: 25%; height: 25%; } This would never make squares.
.box { width: 25vw; height: 25vw; } This would always make squares, in supported browsers (that's over half of them)
vw = viewport width in percentages.
25vw = 25% of the viewport width.
Big screens: 25vw
Medium screens: 33vw (yeah I know)
Tablet screens: 50vw
Mobile screens: 100% (this avoids weird issues in ios safari)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment