移动开发-rem适配问题

浏览器默认的字体大小一般是16px,但是可以自己设置。

em 基于父元素的字体大小
rem的大小是基于html字体的大小

1、px和em的区别？

• px像素（pixel）——px像素是相对于显示器屏幕分辨率
• em相对于当前对象内文本的字体尺寸。如果当前对象内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸，任意浏览器的默认字体高都是16px。

IE无法调整那些使用px作为单位的字体大小，国外大部分网站能够调整的原因在于使用了em作为字体单位

所有未经调整的浏览器都符合1em=16px;那么12px=0.75em,10px=0.625em。
为了简化font-size的换算，需要在css中的body选择器中声明font-size=62.5%,这就使得em的值变为16px*62.5%=10px。 这样的话12px=1.2em,14px=1.4em

em特点：

em的值并不是固定的
em会继承父级元素的字体大小

所以我们在写CSS的时候，需要注意：

1. body选择器中声明font-size=62.5%
2. 将你的原来的px数值除以10，然后换上em作为单位
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
   比如说#content中声明了字体1.2em，那么在声明p的字体大小只能是1em。因为此em非彼em。它因继承#centent的字体高而变成了1em=12px.

2、什么是rem？

r是root根元素，html中根元素是html.
rem的大小是基于html字体的大小

3、rem在移动端的适配

假设有三个设备：320px、480px、640px

@media (min-width:320px){
    html{
    font-size:50px; 
  }
}

@media (min-width:480px){
    html{
    font-size:75px; 
  }
}

@media (min-width: 640px) {
        html{
            font-size: 100px;
        }
    }