rem理解及应用【笔记】

一、rem的定义理解

1.rem的定义理解：通过设置根元素<html>的font-size的大小，来控制整个html文档内的字体大小、元素宽高、内外边距等，

2.rem（font size of the root element）是指相对于根元素的字体大小的单位。

　em（font size of the element）是指相对于父元素的字体大小的单位。
　它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

二、为何使用rem？

1、实现强大的屏幕适配布局

2、响应式做法

3、设置viewport进行缩放

4、rem能等比例适配所有屏幕

三、用js去计算并设置html标签的font-size大小

<script>
    //原始设计果图大小是640
    var fontSizeAuto = function(oriWidth){
        return function(){
            var viewportWidth = document.documentElement.clientWidth;
            if(viewportWidth > oriWidth){ viewportWidth = oriWidth; }
            if(viewportWidth < 320){ viewportWidth = 320; }
            document.documentElement.style.fontSize = viewportWidth/(oriWidth/100) +'px';    
        }
    }
    fontSizeAuto(640)();
    window.onresize = fontSizeAuto(640);

    //原始设计果图大小是750，则
    fontSizeAuto(750)();
    window.onresize = fontSizeAuto(750);
</script>

<script>
   //原始设计果图大小是640
 $(document).ready(function(){
    // rem兼容
        var winW = $(window).width();/*获取设备宽度*/
        var constant = winW/6.4;/*设置根元素<html>字体大小*/ 
　　$('body,html').css({"font-size":constant});/*初始化字体大小*/ 
　　$(window).resize(function(){ 
　　　　var winW = $(window).width(); 
　　　　var constant = winW/6.4;  
　　　　$('body,html').css({"font-size":constant}); 
　　}) 
}) 
</script>

<script>
    /*设置根元素<html>字体大小*/
    function getRem() {
　　　　var html = document.getElementsByTagName("html")[0]; /*获取标签元素<html>*/
　　　　var oWidth = document.body.clientWidth || document.documentElement.clientWidth; /*获取设备的宽度  ||后为兼容IE低版本写法*/
       html.style.fontSize = oWidth / 6.4 + "px"; /*设置根元素<html>字体大小   计算出的值 就相当于1rem;为什么？ 这就是rem单位的规定 1rem就等于根元素<html>字体大小*/
        }
         /*6.4: 为设计稿宽度640px; 若是750px的设计稿 只需要将6.4改为7.5即可。
         * 在手机屏幕宽度与设计稿一致时，即：oWidth = 750px 那么上面的计算 oWidth / 6.4 + "px" 结果就是100px;  html.style.fontSize = 100px 
         *css3中规定 1rem就对应这<html>的font-size的大小，所以100px = 1rem 这样方便大家将px转化为rem 按照这个比例来设置字体大小、元素宽高、内外边距等的单位为rem;
         *举例：在设计稿中，某一行字体大小为14px,则我们需要在css文件中将对应的字体设置为0.14rem;
         *在设计稿中，某一个元素宽高分别为 100px与20px;则我们需要在css中将对应的宽高设置为1rem与0.2rem;
         */
        /*页面初始化调用getRem()*/
    window.onload = function() {
       /*初始化*/
       getRem();
       /*getRem绑定监听*/
       window.addEventListener("resize", getRem, false);
    };
</script>

四、移动端自适应rem使用步骤

　　第一步：分析确定设计图的大小

　　第二步：增加js脚本

　　第三步：样式表中使用rem单位