Mobile responsive components

responsive-components.md

1. Size components in px from mockup size

width: 300px;
height: 240px;

2. in resize, change component fontSize from default (16px) to ratio of "device size / mockup size")

el.style.fontSize = Math.min(width, height) / 360 * 16 + 'px'

3. change components from px to em

width: 300px / 16px * 1em;
height: 240px / 16px * 1em;

or with sass functions:

@function em($px) {
    @return $px / 16px * 1em;
}

width: em(300px);
height: em(240px);

Components will now scale proportionnally with device size, compared to the mockup size

Used in: http://swissarmyman.com and others