移动端rem布局

一. rem布局

    好处： 不同设备下看起来比较协调。 	
    坏处： 显示的内容并不会在大屏幕展示的内容多。

    em : 是一个相对单位，1em等于当前元素或父元素的font-size值。
            1em == 1个font-size的大小

    rem : 是一个相对单位，1rem等于根元素的font-size值。
            1rem == 1个根元素的font-size大小 就是  1个html标签的font-size大小
            rem -> root + em

    rem布局的原理：
        页面中的元素采用rem作为尺寸或者间距的单位。
        想办法去动态改变html标签的font-size大小，这样就可以适配不同的设备进行等比缩放。
        如何做到font-size动态化？
            1. 通过JS （JavaScript）
                document.documentElement.clientWidth -> 获取布局视口的宽度。
                在iphone 6 -> document.documentElement.clientWidth -> 375
                在iphone 6 plus -> document.documentElement.clientWidth -> 414

            在iphone 6 -> font-size 100px ?
                document.documentElement.clientWidth(375) / 3.75 -> 100

            在iphone 6 plus -> font-size 大于 100px ?
                document.documentElement.clientWidth(414) / 3.75 -> 110.4


            2. 通过vw （vw是尺寸单位）

二. rem布局的原理：

1. 通过JS （JavaScript）
2. 通过vw （vw是尺寸单位）
    vw -> view width 
    vh -> view height
        相对单位：表示把屏幕自动分成了100vw宽和100vh高。
        vw / vh : 把屏幕分为100份，1vw等于屏幕宽的1%。 

        假设屏幕是375px -> 100vw -> 1vw == 3.75px
        假设屏幕是414px -> 100vw -> 1vw == 4.14px

        iphone6 -> html的font-size ? -> 100px0
            1vw == 3.75px ? -> 多少个vw == 100px -> 26.66667vw -> 100px

        iphone6 plus -> html的font-size ? -> 
            1vw == 4.14px ? -> 26.66667 * 4.14px ? -> 110.4px

注：选择iphone6的html的font-size为100是为了好算。也可以用工具辅助开发。
    vsCode中去下载一个插件 -> px to rem -> 在设置把对应的font-size设置下。
        -> alt + z进行px转rem的操作。

注：使用rem进行布局的时候，一定要在body中重置默认的font-size大小。

实战rem布局：
    直接按一种设备去做。-> iphone 6 -> 版心375。

    注：在线px转rem：http://www.ofmonkey.com/front/rem