em和rem

本身不是搞前端的，但是遇到响应式开发，遇到em和rem，把自己经验分享出来

首先你要记住：浏览器默认字体大小是16px;

 一、rem

        首先你先在心里确定你设定的rem值的大小，如12px

        html{font-size:百分比}     百分比=12px/16px=75%;

        当你设置某元素大小时，

                    span{

                            font-size:1rem;(相当于设置为12px)

                    }

        你可以根据页面宽高来设置html的font-size大小，当html的font-size大小改变时，rem的大小随之改变

二、em

        首先你先在心里确定你设定的em值的大小，如12px

        body{font-size:百分比}   百分比=12px/16px=75%;     

        当你设置某元素大小时，

                    span{

                            font-size:1em;(相当于设置为12px)

                    }

        你可以根据页面宽高来设置body的font-size大小，当body的font-size大小改变时，em的大小随之改变

三、如何根据页面宽高设置html或body的font-size大小

        html{font-size:100%}    ->  可以看懂这是什么意思了吧，默认rem为16px;

        完成后，你可以定义响应式字体：

@media screen and (min-width:300px) and (max-width:500px) {

        @media screen and  (min-width:640px) and (max-width:960px)    {body{font-size:1rem;}}      

        @media screen and  (min-width:960px) and (max-width:1200px)  {body{font-size:1.2rem;}}

        @media screen and  (min-width:1200px) {body{font-size:1.5rem;}}

        上面代码的意思是：

                    当宽度大于640px小于960px时，设置body的font-size为1rem即16px            则1em=16px;

                              大于960px小于1200px时，                                  1.2rem即19.2px      则1em=19.2px;

                              大于1200px时，        ·                         1.5rem即24px         则1em=24px;

        还有不懂得同学可以研究一下@media

注：google浏览器不支持12px以下的字体，可使用firefox进行测试

总结    ：当用rem时就操心html里font-size的大小，用em时就操心body里font-size的大小。