css字体单位

了解：

首先先了解四个字体单位：px  em  pt  rem

px：单位名称为像素，相对长度单位，像素（px）是相对于显示器屏幕分辨率而言的，国内推荐；

em：单位名称为相对长度单位。相对于当前对象内文本的字体尺寸，国外使用比较多；

pt：全称为point，但中文不叫“点”，确切的说法是一个专用的印刷单位“磅”，大小为1/72英寸。所以它是一个自然界标准的长度单位，也称为“绝对长度”。

rem：是CSS3新引进来的一个度量单位，也是一个相对单位，这个单位与em区别在于，使用rem为元素设定字体大小时相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

rem的兼容性：除了IE8及更早版本外，所有浏览器均已支持rem。不支持的浏览器应对方法：就是多写一个绝对单位的声明，这些浏览器会忽略用rem设定的字体大小

 

选择：

移动端html5手机网站字体单位font-size选择px还是rem

分为两种情况

1.对于只需要适配pc设备，使用px就可以了

2.对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

 

使用方法：

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1rem=16px。那么12px=0.75rem,10px=0.625rem。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2rem, 10px=1rem, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就可以了。

html{

    font-size:62.5%; /* 10÷16=62.5% */

}

body{

    font-size:12px;

    font-size:1.2rem ; /* 12÷10=1.2 */

}

p{

    font-size:14px;

    font-size:1.4rem;

}

在页面中设置了如下的代码来控制不同设备下的字体大小显示使其达到自适应：

html {

    font-size: 62.5%; /* 10÷16=62.5% */

}

@media only screen and (min-width: 481px){

    html {

        font-size: 94%!important; /* 15.04÷16=94% */

    }

}

@media only screen and (min-width: 561px){

    html {

        font-size: 109%!important;/* 17.44÷16=109% */

    }

}

@media only screen and (min-width: 641px){

    html {

        font-size: 125%!important;/* 20÷16=125% */

    }

}

相关网址：

http://www.lanrenmb.com/yidongyunying/shoujijianzhan/1293.html

http://www.520ued.com/article/53e98eafbb16a74c41b5de77

http://www.douban.com/note/155032221/

http://bbs.html5cn.org/thread-79139-1-1.html

http://www.w3cplus.com/css3/define-font-size-with-css3-rem

http://www.wtoutiao.com/p/p80gwa.html

http://www.itnose.net/detail/6003863.html

 

http://www.itnose.net/detail/6003863.html

什么时候用

http://www.woshipm.com/ucd/24110.html

使用了rem的页面

http://m.dx.com/

https://m.taobao.com/