Skip to content

Instantly share code, notes, and snippets.

@johnpmorris

johnpmorris/vminvmax.js

Last active October 13, 2015 01:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save johnpmorris/a08f2f8fa3f5dfd5c2cc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save johnpmorris/a08f2f8fa3f5dfd5c2cc to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. johnpmorris revised this gist Oct 13, 2015. 2 changed files with 19 additions and 49 deletions.
    19 changes: 19 additions & 0 deletions vminvmax.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    // setting the size of the units used in the calc function from the example pen.
    var vminsize = 2
    var vmaxsize = 1.4
    var vhsize = 2

    function setSize() {

    var vw = window.innerWidth / 100 // vw = 1/100th viewport width
    var vh = window.innerHeight / 100 // vh = 1/100th viewport height
    var vmin = Math.min(vw, vh) // vmin = 1/100th of the smallest side
    var vmax = Math.max(vw, vh) // vmax = 1/100th of the largest side

    // set whatever dom element you want to the result of the viewport units.
    document.documentElement.style.fontSize = (( vmin * vminsize ) + ( vmax * vmaxsize ) + ( vh * vhsize )) + "px";
    }

    // apply viewport size when the viewport changes
    window.addEventListener("resize", setSize);
    document.addEventListener("DOMContentLoaded", setSize);
    49 changes: 0 additions & 49 deletions vminvmax.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,49 +0,0 @@
    # vmin and vmax support for ie

    As you probably know if you like using CSS viewport units, the support for them (in ie) suck.
    - `vmax` Isn't supported in any version of ie or edge.
    - `vmin` Isn't supported in ie9

    ##The CSS Viewport Units

    - `vw`: 1/100th viewport width
    - `vh`: 1/100th viewport height
    - `vmin`: 1/100th of the smallest side
    - `vmax`: 1/100th of the largest side

    Note: IE9 uses vm instead of vmin. It does not support vmax.


    ##The CSS Viewport Units in Javascript

    - `var vw = window.innerWidth / 100`
    - `var vh = window.innerHeight / 100`
    - `var vmin = Math.min(vw, vh)`
    - `var vmax = Math.max(vw, vh)`

    ###Setting your `html` font-size to a viewport unit and using em values everywhere, results in ridiculously responsive web pages

    in *CSS:*
    ```
    html {
    font-size: calc( 2vmin + 1.4vmax + 2vh );
    }
    ```

    The same thing in javascript.
    ```
    var vminsize = 2
    var vmaxsize = 1.4
    var vhsize = 2
    function setSize() {
    var vw = window.innerWidth / 100
    var vh = window.innerHeight / 100
    var vmin = Math.min(vw, vh)
    var vmax = Math.max(vw, vh)
    document.documentElement.style.fontSize = (( vmin * vminsize ) + ( vmax * vmaxsize ) + ( vh * vhsize )) + "px";
    }
    window.addEventListener("resize", setSize);
    document.addEventListener("DOMContentLoaded", setSize);
    ```
  2. johnpmorris created this gist Oct 13, 2015.
    49 changes: 49 additions & 0 deletions vminvmax.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,49 @@
    # vmin and vmax support for ie

    As you probably know if you like using CSS viewport units, the support for them (in ie) suck.
    - `vmax` Isn't supported in any version of ie or edge.
    - `vmin` Isn't supported in ie9

    ##The CSS Viewport Units

    - `vw`: 1/100th viewport width
    - `vh`: 1/100th viewport height
    - `vmin`: 1/100th of the smallest side
    - `vmax`: 1/100th of the largest side

    Note: IE9 uses vm instead of vmin. It does not support vmax.


    ##The CSS Viewport Units in Javascript

    - `var vw = window.innerWidth / 100`
    - `var vh = window.innerHeight / 100`
    - `var vmin = Math.min(vw, vh)`
    - `var vmax = Math.max(vw, vh)`

    ###Setting your `html` font-size to a viewport unit and using em values everywhere, results in ridiculously responsive web pages

    in *CSS:*
    ```
    html {
    font-size: calc( 2vmin + 1.4vmax + 2vh );
    }
    ```

    The same thing in javascript.
    ```
    var vminsize = 2
    var vmaxsize = 1.4
    var vhsize = 2
    function setSize() {
    var vw = window.innerWidth / 100
    var vh = window.innerHeight / 100
    var vmin = Math.min(vw, vh)
    var vmax = Math.max(vw, vh)
    document.documentElement.style.fontSize = (( vmin * vminsize ) + ( vmax * vmaxsize ) + ( vh * vhsize )) + "px";
    }
    window.addEventListener("resize", setSize);
    document.addEventListener("DOMContentLoaded", setSize);
    ```