rem / em 使用

rem 和 em 的不同之处在于，

rem 是根据 html 根节点下的字体大小进行计算的，不仅可以设置字体大小，元素高宽都可以设置。

em 是根据父元素字体大小进行设置。

示例：

< html >

< head >

    < title > testhtml </ title >

    < meta charset = "utf-8" >

    < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >

    < style >

        html {

            font-size : 20 px ;

        }

        button {

            width : 6 rem ;

            height : 4 rem ;

            font-size : 1 rem ;

            color : blue;

            border : 1 px solid red;

        }

    < / style >

</ head >

< body >

    < button >

        123

    </ button >

    < script >

        // 该例子默认的分辨率是 1680px

        console . log ( 'window.screen.width:' , window. screen .width)

        document. getElementsByTagName ( "html" )[ 0 ].style.fontSize = window. screen .width / 1680 * 20 + 'px' ;

        console . log (document. getElementsByTagName ( "html" )[ 0 ].style.fontSize)

    < / script >

</ body >

</ html >

参考资料：

http://www.cnblogs.com/dtdxrk/p/4644703.html